IE7 显示问题：菜单中的表格

Question

我编写了一个在 IE8、FF3.6、GC7 中运行良好的菜单样式。现在的问题是，我的老板希望它甚至可以在 IE7 上运行。我真的很努力让它在 IE7 上运行，但无法获得相同的外观。

menu.css

a{outline:none;}

.menu {
margin:0;
display:table;
padding:0;
white-space:nowrap;
width:958px;
text-align:center;
font-size:12px;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
height: 30px;
background: transparent url("../images/menubg.jpg") repeat-x top left;
border-bottom:4px solid #92C4E9;
border-right:2px solid #005D91;
border-left:2px solid #005D91;
}
.menu ul {
list-style:none;
margin:0;
padding:0;
display:table-row;
white-space:nowrap;
}
.menu ul li{
display:table-cell;
border-right:1px solid #005D91;
border-left:1px solid #005D91;
}
.menu ul a{
display:block;
padding:12px 5px 0 5px;
text-decoration:none;
height:26px;
margin: 0 3px 0 3px;    
color:#ffffff;  
}
.menu ul a:hover{
margin: 0 3px 0 3px;    
background:transparent url("../images/menubgover.jpg") repeat-x top left;

}
.menu li ul
{   
margin:0px;
padding:0px;
display:none;
position:absolute;
background-color:#15375f;
filter: alpha(opacity=85); 
-moz-opacity:0.85; 
-khtml-opacity: 0.85;
opacity: 0.85;

}
.menu li:hover ul
{
margin:0px;
padding: 15px 15px 0px 20px;
text-align:left;
line-height:0px;
display:block;
color:#fff;
}
.menu li li
{
list-style:none;
display:list-item;
border-right:0px;
border-left:0px;
padding:0px;
}
.menu li li a
{color:#92C4E9; text-decoration:none; padding:0; margin:0px; font-weight:normal;
}
.menu li li a:hover
{color:#92C4E9; text-decoration:underline; background:none; padding:0; margin:0px; font-weight:normal;}

.present{margin: 0 3px 0 3px;background:transparent url("../images/menubgover.jpg") repeat-x top left;}

Answer 1

IE7 不支持display:table，所以你必须以不同的方式重建菜单。

Answer 2

不幸的是，IE 拒绝支持 display: table 等是大多数 CSS 布局被黑的主要原因。一家公司一直在阻碍 Web 开发进度，真是令人难过 =(

编辑：另一种方法可能是使用 display: table 用于所有健全的浏览器和 clearfix hack 用于 IE。您当然可以对所有浏览器使用 clearfix，但 display: table 等渲染速度要快得多。

Answer 3

Ie8 实际上不支持任何表格显示属性，只有 firefox 和其他一些浏览器支持

http://www.w3schools.com/css/pr_class_display.asp

我会尝试使用 display:block

Answer 4

我建议使用display:inline-block