Question

<table width="320" cellspacing="0" cellpadding="0" valign="top" bgcolor="#ffffff" style="border:1px solid #d6d6d6;border-collapse:collapse;">
  <tr>
    <td height="131" valign="bottom" style="padding:0px 8px;">aaa</td>
  </tr>
  <tr><td height="10" style="line-height:1px;">bbb</tr>
  <tr>
    <td height="182" valign="top" style="padding:0px 8px;line-height:1px;">ccc</td>
  </tr>
</table>

在IE6和IE7中，第一个td具有与131px完全相同的高度值，但在IE8中它具有132px。

如何解决？

Answer 1

这应该为创建不同的IE版本提供了可能性

This site should give you a quick fix但可能不最佳修复

因为这会为不同的浏览器提供多个css文件。

但是你应该使用相同的代码来区分你的html标签的类：

-article axample- （@JezenThomas Tnx找到关于此Reasons why no to do that的好文章）

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

 div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

Answer 2

您是否使用过浏览器重置？这有助于消除浏览器的不一致性。尝试mayer http://meyerweb.com/eric/tools/css/reset/或称为normalize http://necolas.github.com/normalize.css/的新样式，这有助于删除不同浏览器的填充和边距，即使是同一制造商也是如此。

如果您不知道重置是什么重置是您添加到页面的css文件，它只是重置或将许多元素恢复到默认设置，在许多情况下为0，当所有浏览器中的所有内容重置后，你可以开始更一致地重建页面css。

如果你已经尝试了这个并且它失败了，那么你可以在表中添加一个类，然后使用条件注释来修复表的高度。 Paul Irish的html5样板文件顶部带有条件语句，有助于在同一样式表中定位所有不同版本的IE，因此不需要IE6，IE7，IE8样式表。

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

欢呼声，斯蒂芬

IE8，IE7，IE6，td的高度是1px不同

2 个答案: