css - IE9 渲染 CSS 表的方式与 Chrome 不同

Question

我对我尝试使用 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&amp;s=H&amp;co=1&amp;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。

Answer 1

在我深入研究下面建议的解决方案之前，我想指出您的 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%。就个人而言，我会谨慎行事，只处理任何剩余空间。

---

至于表格的总宽度，您还没有显示其父元素的任何代码，因此无法判断其总宽度是如何确定的。或许解决上述问题也会解决宽度问题。