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

我有一张桌子，上面有我制作的布局。 Google Chrome浏览器和Firefox浏览器的布局看起来不错，但在Internet Explorer中看起来不错。在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>

我该如何解决这些布局差异？

来源

2013-11-23 Nir Berko

你可以尝试很多事情来解决这个问题...

尝试添加下面的“黑客”到你的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/

使用这些工具将帮助您跨浏览器兼容网站......如果事情是不兼容，您可以使用这些工具进行调试和修复您的工作。

由于罗布已经低于指出，IE浏览器已经过时，大多数版本的HTML5缺乏兼容性，因此你将不得不拿出解决方案，如果你将要作出的跨浏览器兼容的站点。

来源

2013-11-23 13:56:30 tinthetub

他不应该为IE调整标记或CSS。如果标记有效，那么IE就是问题所在。（当然，IE总是有问题） – Rob

@Rob我同意你的观点。 IE始终是个问题，但一位优秀的开发人员总是让他的工作跨浏览器兼容，而这正是他要求我们帮助他的。 – tinthetub

但我不同意他应该为IE改变工作标记。还有其他的方法就像你展示的那样。（每当有人说，“跨浏览器兼容”，他们总是指“让它在IE中工作”。） – Rob

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

，而不是使用rowspan的

尝试使用高度= “33％” 或高度= “66％”

或尝试两种

来源

2013-11-23 14:05:31

不工作，我也不想设置静态高度。 –

@NirBe你还试过应用'border-collapse：collapse;'？这可能会阻止边界在IE中上下滑动。 – tinthetub

是的，这是行不通的。 –

每一行这样的定义高度：

<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

来源

2013-11-25 15:31:01 DePhiless

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

回答

相关问题