表在 Internet Explorer 中看起来很糟糕答案

【问题标题】：Table looks bad in Internet Explorer表在 Internet Explorer 中看起来很糟糕
【发布时间】：2017-05-14 16:04:04
【问题描述】：

我有一张我制作的带有布局的桌子。该布局在 Google Chrome 和 Firefox 中看起来不错，但在 Internet Explorer 中则不然。

这是它在 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>

如何解决这些布局差异？

【问题讨论】：

标签： html css internet-explorer html-table

【解决方案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 兼容性，因此如果您要制作跨浏览器兼容的网站，则必须想出解决方案。

【讨论】：

他不应该为了 IE 而调整标记或 CSS。如果标记是有效的，那么 IE 就是问题所在。（当然，IE总是有问题）
@Rob 我同意你的看法。 IE 一直是个问题，但优秀的开发人员总是让他的工作跨浏览器兼容，这就是他要求我们帮助他解决的问题。
但我不同意他应该为了 IE 而改变工作标记。还有其他方法，例如您展示的方法。（每当有人说“跨浏览器兼容”时，他们总是指“让它在 IE 中运行”。）
我还是不知道怎么解决，是IE的问题，rospan不好用。
Rob，Opera、Firefox、Chrome 甚至 Safari 在兼容性上都击败了 IE，但还是有一堆“老太太”分不清。如果他要在一个实际的网站上工作，或者至少是在开始时，他也应该考虑 IE。否则你之前说的真的没有意义:) @NirBe 你通读了我的帖子并尝试了一切？

【解决方案2】：

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

而不是使用行跨度

尝试使用 height="33%" 或 height="66%"

或者两个都试试

【讨论】：

@NirBe 你也试过申请border-collapse:collapse;吗？这可能会阻止边框在 IE 中上下滑动。

【解决方案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 上测试

【讨论】：