我对我尝试使用 CSS 创建的这些表格在 IE9 中呈现的方式有疑问。它们在 Chrome 和 Firefox 中看起来不错,但 IE9 似乎让它们占用了额外的空间并且它们流到下一个“行”
Chrome :
IE9:
代码示例:
<div class="prodDetail">
<h2>Sales History</h2>
<div class="salesTotals">
<h3>Sales history for previous 12 months</h3><br>
<span class="column">UOM</span>
<span class="column">Quantity</span>
<span class="column">Total $</span>
<span class="column">Avg. $</span>
<span class="column">Ord. Count</span>
<span class="column">Ord. Freq.</span>
<span class="column">Core</span>
<span class="column">Last Ord.</span><br>
<span class="column">BX</span>
<span class="column">1</span>
<span class="column">5.03</span>
<span class="column">5.03</span>
<span class="column"></span>
<span class="column">1</span>
<span class="column">N</span>
<span class="column">07/26/2011</span><br>
<br>
</div>
<div class="salesHist">
<span class="columnHist">Loc</span>
<span class="columnHist">Order</span>
<span class="columnHist">UOM</span>
<span class="columnHist">Qty. Ordered</span>
<span class="columnHist">Qty. Shipped</span>
<span class="columnHist">Order Date</span>
<span class="columnHist">Ship Date</span><br>
<span class="columnHist data odd">1</span>
<span class="columnHist data odd"><a href="ordDtl.php?ord=813703&s=H&co=1&oid=269460">418703</a></span>
<span class="columnHist data odd">BX</span>
<span class="columnHist data odd">1</span>
<span class="columnHist data odd">1</span>
<span class="columnHist data odd">07/26/2011</span>
<span class="columnHist data odd">07/27/2011</span><br>
</div>
CSS:
div.prodDetail {
height: auto;
width: auto;
border: 2px solid gray;
margin: 3px;
background: whiteSmoke;
}
div.salesTotals {
display: block;
margin: 0 auto 0 auto;
}
div.prodDetail span {
padding: 0;
display: inline;
font-size: 12px;
background: none;
font-weight: normal;
}
div.prodDetail span.column {
width: 12.5%;
display: inline-block;
margin: 5px auto 5px auto;
height: 14px;
text-align: center;
}
div.salesHist {
display: inline-block;
margin: 0 auto 0 auto;
width: 100%;
}
div.prodDetail span.columnHist {
width: 14.3%;
display: inline-block;
padding-top: 8px;
padding-bottom: 6px;
height: 12px;
text-align: center;
}
div.prodDetail span.columnHist.data {
padding-bottom: 8px;
}
div.prodDetail span.columnHist.data.odd {
background: lightGrey;
}
我希望我包含了足够多的相关 CSS。
最佳答案
在我深入研究下面建议的解决方案之前,我想指出您的 CSS 中一些可以稍微清理一下的地方...
div.prodDetail span.column {
width: 12.5%;
display: inline-block;
margin: 5px auto; /* shorthand: top/bottom, right/left */
padding: 0; /* shorthand: top/right/bottom/left */
height: 14px;
text-align: center;
}
div.prodDetail span.columnHist {
width: 14.3%;
display: inline-block;
margin: 0 auto; /* shorthand: top/bottom, right/left */
padding: 8px 0 6px; /* shorthand: top, right/left, bottom */
height: 12px;
text-align: center;
}
- 将零边距移至
span.columnHist
。 - 将零填充移动到
span.column
中。 - 尽可能转换为速记。
我不认为这能解决任何问题,但它提高了可读性,而且更合乎逻辑,因为填充和边距现在在这两个列类中的每一个中都在一起,而不是在两个类之间拆分。
在你的表格的第一部分,你有 8 列平均分配给你 12.5%,你在这里使用...
div.prodDetail span.column {
width: 12.5%;
}
在表格的第二部分,你有 7 列平均分配给你 14.2857%,你在这里四舍五入到 14.3%...
div.prodDetail span.columnHist {
width: 14.3%;
}
请注意,您只有在换行的部分部分有问题。
考虑一下:每个浏览器都会以不同的方式进行布局计算。
- 何时/如何舍入计算的不同规则
- 关于何时/如何舍入小数百分比的不同规则
- 关于何时/如何舍入小数像素的不同规则
- 以及何时/如何计算父项宽度与单个子项宽度的规则
我假设您使用百分比是因为您想要流畅的布局。
假设容器宽度为 901 像素的示例:
场景 1:14.3% x 901 = 128.843(每列像素)
假设随机浏览器将最终值四舍五入...
129 x 7 列 = 903 像素宽
即使浏览器直到最后才舍入...
128.843 x 7 列 = 901.901 => 902 像素宽
两者都比您的容器宽,您将换行到下一行。
场景 2:14.3% x 7 列 = 100.1% = 901.90 => 902 像素宽
您定义的总宽度 width 大于容器可容纳的 100%,这也将创建一个包装。一种浏览器可能会四舍五入总百分比,你没问题。另一个人可能会从字面上理解它,而不是将总像素值四舍五入。
浏览器可能首先查看总宽度,然后再构建表格列,反之亦然。
要点是,通过以这种精确的方式使用小数,您迫使浏览器进行数学转换,这可能在此过程中引入一些复合数学舍入错误。强>
建议的解决方法:
如果您的表格是固定宽度,则将列宽定义为整个像素值。
或使用小于您最初计算的金额的百分比。相反,大约是 14.2%。就个人而言,我会谨慎行事,只处理任何剩余空间。
至于表格的总宽度,您还没有显示其父元素的任何代码,因此无法判断其总宽度是如何确定的。或许解决上述问题也会解决宽度问题。
关于css - IE9 渲染 CSS 表的方式与 Chrome 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7984198/