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中的表格单元

OR

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特定的样式表中，您可以根据需要“覆盖”默认样式，但“普通”浏览器将无法看到它们。

ie6和7中的表格单元格

2 个答案: