IE9 呈现 CSS 表格的方式与 Chrome 不同

Question

我在尝试使用 CSS 创建的这些表在 IE9 中呈现的方式存在问题。它们在 Chrome 和 Firefox 中看起来不错，但 IE9 似乎让它们占用了额外的空间，它们流到了下一个“行”

铬：

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 像素宽

您定义的总宽度宽度大于容器可以容纳的 100%，这也将创建一个环绕。一个浏览器可能会四舍五入总百分比，你很好。另一个人可能会从字面上理解，而是将总像素值四舍五入。

浏览器可能会先查看总宽度，然后再构建表格列，反之亦然。

重点是，通过以这种精确的方式使用小数，您会强制浏览器进行数学转换，可能会在此过程中引入一些复合数学舍入误差。强>

建议的解决方法：

• 如果您的表格是固定宽度，则将列宽定义为整个像素值。

• 或使用小于您最初计算的金额的百分比。相反，大约是 14.2%。就个人而言，我会谨慎行事，只处理剩余的空间。

---

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

Answer 2

似乎是各种值的典型不匹配...

尝试使用这个 CSS 重置示例 http://meyerweb.com/eric/tools/css/reset/

如果将所有内容设置为在页面加载时设置值，则不需要浏览器的假设！

放在样式表的最顶部。让我们知道您的进展情况！