那些遇到过的问题

HTML流体列:25%+ 25%+ 25%+ 25%!= webkit/opera中的100%

Gor*_*onM 2 html css cross-browser liquid-layout

我正在尝试构建一个自适应的多列布局(流畅,有弹性,无论你想要它),并构建了一个测试文档来尝试这个想法.

我做了一些计算来得出数字,这些数字可以让x列在页面中并排放置.2很容易(50%),4(25%)和10(10%)也是如此.如果你考虑一个保证金来留下一个阴沟并减去它,那么你得到你需要的列宽.

一切似乎进展顺利,我构建了CSS和HTML(见下文)并在Firefox中试用了它并且一切正常.但是,当我在Opera,Chrome和Safari中试用它时,我遇到了一个问题.当彼此相邻放置时,列似乎总计不超过100%,它们似乎略微缩短.列数越多,问题就越严重.通过10列,问题非常明显.

为什么会这样？Firefox的行为是正确的,还是在其他浏览器中发生的事情是什么意思？更重要的是,我如何解决它在所有浏览器中产生一致的结果？

我已经构建了一个下面代码的JSFiddle,可以在这里找到.完整的测试页面也可在此处获得.(JSfiddle只是相关代码,而整页还有其他内容)

用于执行列的CSS如下: 

.columnHolder {
    overflow: hidden;
    background: #EFE; /* For layout testing only! */
    margin: .5em 0;
    padding: 0;
}
.columnHolder h1 {
    background: #EFF; /* For layout testing only! */
}
.column {
    float: left;
    margin: .5%;
    background: #FFE; /* For layout testing only! */
    text-align: justify;
}
.column.half {
    width: 49%;
}
.column.third {
    width: 32.33333%
}
.column.quarter {
    width: 24%;
}
.column.fifth {
    width: 19%;
}
.column.sixth {
    width: 15.66666%;
}
.column.seventh {
    width: 13.28571%;
}
.column.eighth {
    width: 11.5%;
}
.column.ninth {
    width: 10.11111%;
}
.column.tenth {
    width: 9%;
}
Run Code Online (Sandbox Code Playgroud)

我正在测试的(缩减版本)标记如下:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gordian Solutions</title>
        <link rel="stylesheet" href="./css/core.css" media="all" />
    </head>
    <body>
        <article style="margin: 1em 10% 1em 10%;">
            <section class="columnHolder">
                <h1>2 Column Test</h1>
                <div class="column half">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column half">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
            </section>
            <section class="columnHolder">
                <h1>4 Column Test</h1>
                <div class="column quarter">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column quarter">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column quarter">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column quarter">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
            </section>
            <section class="columnHolder">
                <h1>10 Column Test</h1>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
                <div class="column tenth">
                    <p> Proin ornare, nisl et vestibulum dignissim, purus odio scelerisque massa, in mollis dolor neque nec massa. Vestibulum neque ipsum, sodales sit amet dapibus a, viverra sit amet est. Mauris odio mi, semper vel ultricies ac, hendrerit eget tortor. Quisque eu mi tellus, nec iaculis lectus. Duis pellentesque, ipsum nec molestie aliquet, lorem urna scelerisque risus, quis venenatis nibh dolor ac elit. Duis vitae nisi ante. <a href="#">Morbi dictum ornare</a> justo in fermentum. </p>
                </div>
                <div class="column tenth">
                    <p> Donec magna justo, semper nec pulvinar eu, faucibus eget neque. Nunc egestas porttitor orci, eget congue nisl rutrum in. Donec ut dignissim nunc. Sed a suscipit ante. Fusce in nunc id risus elementum molestie eget eget eros. Nunc eget dolor sit amet eros accumsan porta. Phasellus nibh ligula, ullamcorper sed adipiscing at, luctus ut justo. Mauris eleifend posuere laoreet. Integer odio leo, dapibus a pretium sit amet, ultricies id augue. Aliquam mollis ipsum id urna varius iaculis. Class aptent taciti sociosqu ad <a href="#">litora torquent per conubia</a> nostra, per inceptos himenaeos. Pellentesque leo arcu, rhoncus ut suscipit ut, posuere a sapien. Nullam a nisi nec nibh facilisis egestas dignissim quis magna. Nulla nec egestas elit. Nunc nibh est, porttitor at hendrerit a, iaculis vel est. Cras pulvinar dignissim neque, et ultrices massa tristique nec. </p>
                </div>
                <div class="column tenth">
                    <p> Nulla hendrerit; <a href="#">nunc quis mollis</a> cursus; lectus libero viverra turpis, ut ornare arcu mauris eu ipsum. Curabitur et dolor dui, nec sagittis felis. Nam elit purus, eleifend nec pulvinar et, commodo id nisl. Curabitur pharetra, quam porttitor aliquam volutpat, nunc ipsum semper quam, non imperdiet libero risus non diam. Praesent et dui arcu. Praesent lorem lorem, malesuada sit amet egestas eget, lacinia sed velit. In congue sagittis ipsum, sed venenatis ligula vulputate vel? </p>
                </div>
            </section>
        </article>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

ano*_*ave 7

当您开始使用百分比宽度时,问题与舍入差异有关 - 例如,如果原始容器是205像素并且您有4 x 25%列,则您将每列设置为宽度为51.25px.你不能拥有四分之一像素,但是如何处理它可能因浏览器而异 - 有些可能会在每种情况下降低四分之一像素; 其他人可能会将1px标记到最后一列.

编辑:阅读John Resig在很久以前的一篇好文章,值得一读.他从Mozilla Dev的David Baron那里得到了一个引用,它很好地总结了这些问题:

  1. 从容器的一个边缘开始的4个宽度/高度为25%的相邻物体(例如)应恰好在另一个边缘处结束; 容器中永远不应该有一个额外的像素,并且它们永远不应该被包裹,因为它是一个像素到宽
  2. 逻辑上相邻的物体应始终在视觉上触摸; 由于舍入误差,不应该存在像素间隙或重叠像素
  3. 给定相同宽度的对象应占用相同数量的像素
  4. 对象边界应始终(在视觉上)别名到显示中的特定像素边界(它们永远不应模糊)

CSS规范中没有真正的标准化,应该如何实现上述4个要求,这就是浏览器以不同方式对这些要求做出妥协的原因.

编辑:也就是说,当你问到如何最好地避免这个问题 - 在可能的情况下,将容器元素保持在其列中可以被整除的宽度.(虽然流体布局并不总是这样).

归档时间：

查看次数：

161 次

最近记录：

13 年，9 月 前
相关归档
CSS样式表以什么顺序覆盖？ 149
Bootstrap模式对话框中的Google地图自动填充结果 66
如何制作提交给自己的PHP表单？ 47
改变下划线颜色 29
HTML在textarea中显示换行符 23
如何将"</ script>"放在javascript字符串中？ 20
text-align center受float元素的影响 19
如何减少我在jQuery函数中使用的子项数量？ 17
Base64编码的图像未在gmail中显示 17
如何设置元素的高度以匹配另一个元素的高度？ 16
难疑归档
如何在JavaScript中验证电子邮件地址？ 4099
在JavaScript中创建GUID/UUID？ 3915
是否有唯一的Android设备ID？ 2645
Spring中的@ Component,@ Repository和@Service注释有什么区别？ 1969
<meta charset ="utf-8"> vs <meta http-equiv ="Content-Type"> 1499
如何解决"断点当前不会被命中.此文档没有加载任何符号." 警告？ 1456
除了XHTML自包含标记之外,RegEx匹配开放标记 1323
enctype ='multipart/form-data'是什么意思？ 1290
在Node.js中读取环境变量 1240
对于Android Studio项目,我的.gitignore应该是什么？ 1210