IE9呈现CSS表格的方式与Chrome有所不同 [英] IE9 rendering CSS tables differently than Chrome

查看：76 发布时间：2020/11/17 22:34:23 css internet-explorer google-chrome

本文介绍了IE9呈现CSS表格的方式与Chrome有所不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am having an issue with the way these tables I am attempting to create with CSS are being rendered in IE9. They look fine in Chrome and Firefox, but IE9 seems to have them taking up extra space and they flow over onto the next "row"

Chrome浏览器:

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.

I hope I included enough relevant CSS.

推荐答案

在我深入研究下面建议的解决方案之前，我想指出一下CSS中可以清除的一些内容...

Before I delve into my suggested solution below, I'd like to point out some things in your CSS that could be cleaned up a bit...

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.
尽可能转换为简写.

moved zero margin into span.columnHist.
moved zero padding into span.column.
converted to shorthand where possible.

我不认为这可以解决任何问题，但可以提高可读性，并且自填充&现在，这两个列类别中的每个类别的边距都在一起，而不是在两个类别之间进行拆分.

I don't believe this solves anything but it improves readability and it's more logical since padding & margin are now together in each of these two column classes instead of split between two classes.

在表格的第一部分，您有8列均匀分配，每列分别为12.5％，您在此处使用了...

On the first section of your table, you have 8 columns evenly divided giving you 12.5% each, which you used here...

div.prodDetail span.column {
    width: 12.5%;
}

在表格的第二部分，您将7列平均分配，每列分别为14.2857％，并在此处将其四舍五入为14.3％...

On the second section of your table, you have 7 columns evenly divided which give you 14.2857% each, and you rounded it to 14.3% here...

div.prodDetail span.columnHist {
    width: 14.3%;
}

请注意，您在换行到新行的节中只有一个问题.

Note that you only have an issue on the section section wrapping to a new line.

考虑一下:每个浏览器都会以不同的方式进行布局计算.

Consider this: Every browser is going to do its layout calculations differently.

关于何时/如何舍入计算的不同规则
何时/如何舍入小数百分比的不同规则
何时/如何舍入小数像素的不同规则
以及何时/如何计算父母与个别孩子的宽度的规则

我假设您使用百分比是因为您想要一个流畅的布局.

I assume you're using percentages because you want a fluid layout.

假设容器宽度为901像素的示例:

场景1: 14.3％x 901 = 128.843(每列像素)

Scenario 1: 14.3% x 901 = 128.843 (pixels per column)

假设随机浏览器将最终值向上取整...

Assume a random browser is rounding the final value up...

129 x 7列= 903像素宽

129 x 7 columns = 903 pixels wide

即使浏览器直到结束都没有舍入...

Even if the browser does not round up until the end...

128.843 x 7列= 901.901 => 902像素宽

128.843 x 7 columns = 901.901 => 902 pixels wide

两者都比您的容器宽，您将获得下一行的包装.

Both are wider than your container and you'll get a wrap to the next line.

方案2: 14.3％x 7列= 100.1％= 901.90 => 902像素宽

Scenario 2: 14.3% x 7 columns = 100.1% = 901.90 => 902 pixels wide

您定义的总宽度大于容器可容纳的100％宽度，这也将产生包裹.一个浏览器可能会舍入总百分比，您就可以了.另一个人可能会从字面上理解它，而是取整总像素值.

You've defined a total width width greater than 100% of the container can hold, and this too will create a wrap. One browser may round down the total percentage and you're fine. Another may take it literally and round up the total pixel value instead.

浏览器可能会先查看总宽度，然后再构造表列，或者反之亦然.

Browsers may look at the total width first and construct the table columns second or maybe vice-versa.

要点是，通过以这种精确的方式使用十进制小数，您正在迫使浏览器进行数学转换，这可能会在整个过程中引入一些复杂的数学舍入误差. strong>

建议的解决方法:

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

if your table is a fixed width, then define the column width as a whole pixel value.

或使用小于您最初计算的量的百分比 .大约是14.2％.就个人而言，我会放心地使用它，并处理剩余的空间.

or use a percentage less than the amount you initially calculated. Something like 14.2% instead. Personally, I'd play it safe and just deal with any left over space.

就表的总宽度而言，您尚未显示其父元素的任何代码，因此无法确定其总宽度是如何确定的.也许解决上述问题也可以解决宽度问题.

As far as the overall width of the table, you have not shown any code for its parent element, so it's impossible to tell how its overall width is determined. Perhaps solving the issue above will take care of the width issue as well.

这篇关于IE9呈现CSS表格的方式与Chrome有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

IE9呈现CSS表格的方式与Chrome有所不同 [英] IE9 rendering CSS tables differently than Chrome

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

IE9呈现CSS表格的方式与Chrome有所不同 [英] IE9 rendering CSS tables differently than Chrome

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭