html - 表格在 Internet Explorer 中看起来很糟糕

Question

我有一张带有我制作的布局的表格。该布局在 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>

如何解决这些布局差异？

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]-->

This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.

尝试使用固定像素值而不是百分比，例如

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

You can use the following site to validate your CSS to see if it meets the W3C standards:

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

It'll go though your CSS, check compatibility, and spit back errors if they exist. It'll show you where in your file you have mistakes so you can go fix them. I don't know about any tools that will fix your CSS for you... I wouldn't use it though because I wouldn't learn anything that way.

You can use the following site to validate your HTML and other markup languages you use:

http://validator.w3.org/

Using these tools will help you make cross-browser compatible websites... if something is not compatible, you can use these tools for debugging and fixing your work.

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