Question

我有一张表格，我做了一个布局。布局在Google Chrome和Firefox中看起来很好，但在Internet Explorer中却看不到。

这就是它在Chrome中的外观：

Chrome

这就是它在IE中的样子：

这是表格的HTML代码：

<table border="1">
    <tr>
        <td style="width: 46%" colspan="2"></td>
        <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
        <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
    </tr>
    <tr>
        <td style="width: 23%" rowspan="2"></td>
        <td style="width: 23%" rowspan="2"></td>
    </tr>
    <tr>
        <td style="width: 46%" colspan="2"></td>
    </tr>
</table>

如何解决这些布局差异？

Answer 1

你可以尝试很多方法来解决这个问题......

尝试将以下“hacks”添加到您的html页面：

<!--[if IE]>
    <link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->

<!--[if !IE]>
    <link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->

这将迫使IE使用您在 ie.css 中指定的规则，以便您可以为其提供所需的规则。这也将隐藏IE浏览器中使用的其他Google Chrome和Firefox部分。

尝试使用像

这样的固定像素值，而不是百分比

<td style="width: 20px; padding-top: 20px;" rowspan="2">

您可以使用以下网站验证您的CSS，看它是否符合   W3C标准：

http://jigsaw.w3.org/css-validator/

它将通过你的CSS，检查兼容性，并吐出错误，如果   它们存在。它会告诉你文件中哪里有错误，所以你   可以修复它们。我不知道任何可以修复CSS的工具   对你来说......我不会用它，因为我什么都学不会   那样。

您可以使用以下网站验证HTML和其他标记   您使用的语言：

http://validator.w3.org/

使用这些工具可以帮助您实现跨浏览器兼容   网站...如果某些内容不兼容，您可以使用这些工具   用于调试和修复您的工作。

正如 Rob 在下面指出的那样，IE已经过时，而且大多数版本都缺乏HTML5兼容性，因此如果您要制作跨浏览器兼容的网站，则必须提出解决方案。

Answer 2

我认为是因为IE会尝试填充它看到的剩余空间

而不是使用rowspan

尝试使用height =“33％”或height =“66％”

或尝试两者

Answer 3

为每行定义高度，如下所示：

<table border="1" style="width:100%; height: 100%">
    <tr style="height: 33%">
        <td style="width: 46%" colspan="2"></td>
        <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
        <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
    </tr>
    <tr style="height: 33%">
        <td style="width: 23%" rowspan="2"></td>
        <td style="width: 23%" rowspan="2"></td>
    </tr>
    <tr style="height: 33%">
        <td style="width: 46%" colspan="2"></td>
    </tr>
</table>

在IE8和IE 11上测试

表在Internet Explorer中看起来很糟糕

3 个答案: