ie6 和 7 中的表格单元格

Question

我正在使用 DevExpress ASPxMenu。它生成的 html 在每个菜单项之间创建一个 td 元素。我已经问过 DevExpress 我如何通过设置删除这个 td 或添加一个类，他们说无法完成（http://devexpress.com/Support/Center/p/Q281686.aspx，该票也附有示例解决方案）

html/css 看起来像（我添加了背景：红色以突出显示单元格）：

<table class="nav-menu" cellspacing="0">
    <tr>
        <td class="nav-item nav-item-selected">menu 1</td>
        <td id="td0" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 2</td>
        <td id="td1" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 3</td>
        <td id="td2" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
        <td class="nav-item"> menu 4</td>
        <td id="td3" style="height:1px;width:2px;background:red">
           <div style="height:1px;width:2px;overflow:hidden;"> </div>
        </td>
    </tr>
</table>

.nav-menu 
{
    width:400px;
    height:35px;
    background: transparent;
}
.nav-menu td 
{
    display: none;
}
.nav-item
{
    font: 1em/1.167em Helvetica,Arial,sans-serif!important;
    color: #5A81B3;
    padding-left: 4px;  
    display: table-cell!important;
    border: 0px;    
    border-right-color: #DFE9EF;
    border-right-style:Solid;
    border-right-width: 1px;    
 }
 .nav-item-selected,
 .nav-item:hover
 {    
      color: #5A81B3;
      background: url("../images/arrow-nav.gif") no-repeat scroll 8px 100% #DFE9EF; 
  }

我无法控制带有 id (td id="td0") 的 td，并且我不希望它显示。

上述方法在 FF 和 IE8/9 中效果很好，但在 IE6/7 中效果不佳。我尝试了不同的显示器，但它们只会破坏 FF 和 IE8/9。

我查看了display :table-cell does not work in ie 7? 和IE7 and the CSS table-cell property，但我认为它们对我没有帮助。

所以：

a) 如何让菜单显示类似于 ie6 或 7 中的表格单元格

或

b) 我怎样才能让 ie6 和 7 忽略这条规则

.nav-menu td 
{
    display: none;
}

如果可以的话，我宁愿避免使用 javascript。我也不想使用下面的规则，因为 id 是由 .net 生成的。

  #td0 
  {
      display: none;
  }

谢谢

Answer 1

您可以隐藏其可见性，而不是通过display 隐藏元素。但是，这不会折叠单元格，它所占据的空间仍然存在。它可能（或可能不会）满足您的需求：

.nav-menu td  {
    visibility: hidden;
}

.nav-menu .nav-item {
    visibility: visible;
}

如果你真的需要摆脱那个空间，那么你可以像这样强制单元格占据零像素：

.nav-menu td  {
    visibility: hidden;
    width: 0 !important;
}

.nav-menu td div {
    display: none;
}

您可以在此处查看演示：http://jsfiddle.net/7z7qr/

Answer 2

我认为您所追求的是样式表，您可以在其中定义只有某些版本的 IE 才能“看到”的样式。例如：

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie6-and-ie7.css" />
<![endif]-->

有plenty more options。在您的 IE6/7 特定样式表中，您可以根据需要“覆盖”默认样式，但“普通”浏览器不会看到它们。