IE8 CSS渲染问题(表)

Question

我的网站上有一个非常常见的IE8问题.IE8以不同于其他浏览器的方式呈现我的页面,这非常烦人.如果有人可以提供帮助,我很乐意!

我试图给IE8自己的样式表,但似乎没有用.

这是有问题的页面:

http://www.routeqr.com/toimex/tuotteet

向下滚动到图片部分,您会看到第一列和第二列之间的空间太大.

TH标签也是错误的.

IE不会在那里正确渲染边距,只需用Firefox或其他浏览器检查同一页面,你应该看到差异.

如果有人可以帮助我,我会非常感激,我自己也迷失了.

HTML代码

<table class="tuotekuvat">
<tbody>
<tr>
<th><a name="kannakkeet">&raquo; Kannakkeet</a></th>
</tr>

CSS

.custom .tuotekuvat th {
float: left;
margin-top: 15px;
margin-bottom: 15px;
padding: 10px;
background-color: #333333;
}

Answer 1

该表的编码不正确，您有一个th（单元格）没有colspans指定，并且其table本身有些行有 6 个单元格（列），有些有 5 个。任何浏览器都可能无法平衡这一点；）

然后您浮动单个th- IE 7 及以下版本不理解表格单元格/标题元素上的浮动，并将强制整个第一列与标题链接一样宽

如果我可以建议您坚持使用一种或另一种方法，或者将标题浮动在表格之外，或者甚至将其放入自己的<thead>元素中 - 然后table-layout: fixed在整个表格上使用，以便强​​制列具有相同的宽度。这应该有助于平衡它..但主要是如果您决定该表有六列（无论是否全部使用），那么例如该单一th应该是<th colspan="6">

首先让表格 HTML 正确，其余的在浏览器中应该完全没问题，如果你想让它看起来像表格行和表格标题之间有间隙，你可以填充th.. 但我真的不认为它需要浮动表结构之外