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。
尽可能转换为速记。

我不相信这可以解决任何问题，但它提高了可读性，而且它更符合逻辑，因为填充＆amp; margin现在在这两个列类中的每一个中都在一起，而不是在两个类之间分开。

在表格的第一部分，您有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 columns = 901.901 =＆gt; 902像素宽

两者都比你的容器宽，你会得到下一行的包装。

场景2： 14.3％x 7列= 100.1％= 901.90 =＆gt; 902像素宽

您已经定义了一个大于容器可容纳的100％的总宽度宽度，这也将创建一个包裹。一个浏览器可以向下舍入总百分比，你没事。另一个可能会从字面上理解它并将整个像素值四舍五入。

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

指出，通过以这种精确的方式使用小数分数，您迫使浏览器进行数学转换，可能在此过程中引入一些复合数学舍入误差。

建议的解决方法：

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

或使用百分比小于您最初计算的金额。比如14.2％。就个人而言，我会安全地玩它，只是处理剩下的空间。

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

Answer 2

似乎是各种价值的典型错配......

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

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

放在样式表的最顶部。让我们知道你是怎么过的！

IE9渲染CSS表格与Chrome不同

2 个答案: