ie6と7のテーブルセル

Question

私はDevExpress ASPxMenuを使用しています。生成されるHTMLは、すべてのメニュー項目の間にtd要素を作成します。私は既にデベロッパーに設定を介してこの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は、これを無視するために得ることができますどのようにIE6でテーブルセルまたは7

OR

B）に似て表示するためのメニューを取得する方法ルール

.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固有のスタイルシートでは、デフォルトのスタイルを必要に応じて "上書き"できますが、 "通常の"ブラウザでは表示されません。