2
我試圖構建一個多列布局，它是自適應的（流體，彈性，無論您想要cll它）並且已經構建了一個測試文檔來嘗試這個想法。HTML流體列：webkit/opera中的25％+ 25％+ 25％+ 25％！= 100％
我做了一些計算，以提出數字，允許x列正好適合在一個頁面中並排放置。 2很容易（50％），4（25％）和10（10％）。如果考慮一個保證金留下一個陰溝並減去那個，那麼你就可以得到你需要的百分比列寬。
一切似乎都進展順利，我構建了CSS和HTML（見下文）並在Firefox中試用了它，並且一切正常。但是，當我在Opera，Chrome和Safari中試用時，遇到了問題。當並排排列時，這些列似乎沒有達到100％的總和，它們似乎略微下降。列數越多，問題越嚴重。由10欄，這個問題是非常明顯的。
這是怎麼發生的？ Firefox的行爲是否正確，或者其他瀏覽器中發生了什麼？更重要的是，我如何解決它以在所有瀏覽器中產生一致的結果？
我已經構建了以下代碼的JSFiddle，它可以使用here。完整的測試頁面也可用here。 （該的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%;
}
的（砍伐的版本）標記我與測試如下：
<!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>
Chrome Canary 22.0.1199.0這裏，我看不到任何問題。 – egasimus 2012-07-07 17:55:48
所有的Chrome 20.0.1132.47以及。 – 2012-07-07 18:26:29