IE6/7 CSSクラスのオーバーライド

Question

私のようなCSSファイルがあります：私は、TDにクラスのショーを追加すると

#SomeTable.hideAll td { display: none; } 
#SomeTable.showXYZ .show { display: block } 

を、ディスプレイには、クロム、FF、およびIE8にブロックすることが優先されます。しかし、IE6/7では、オーバーライドされていないような表示は残っていません。このようなCSSのオーバーライドを行うために古いIEで行う必要がある何か奇妙なことはありますか？私はそれが可能ではないか、それとも何かと関係があると思っています。あるいは、オーバーライドを決定するためのルールを理解できません。

EDIT：CSSルールは、CSSがまだ更新されません

.hide { display: none; } 
#SomeTable.showXYZ td { display: block } 

のように見える場合でも。これは特別なことではありませんが、IE6/7のバグでなければなりません。

Answer 1

まだ試しましたか？ -

#SomeTable.hideAll td { display: none; } 
#SomeTable.showXYZ td.show { display: block; } 

Answer 2

<td>要素と他のテーブル関連要素はdisplay:blockまたはdisplay:inlineに設定されるべきではありません。それらには独自のテーブル関連の表示タイプがあり、代わりに使用する必要があります。

例：一部のブラウザで

table.mytable {dislpay:table;} 
td.mycell {display:table-cell;} 

、display:block;も動作するかもしれませんが、これは正しくない、と間違いなく他のブラウザで問題が発生します。上記の表示タイプは正しいものです。

ただし、これらの表示タイプのサポートには、さまざまなブラウザ、特にIEの古いバージョンの間にいくつかの矛盾があります。

すべてのブラウザのために互換性があります最良のオプションは、あなたがそれを示すことにしたい何もしないことを指定するために、単純です - あなたは、showとしてそれをクラスを指定これを行うすなわち

#SomeTable.hideAll .hide { display: none; } 
#SomeTable.showXYZ .show { } /* nothing here */ 

、エレメントタイプのデフォルトの表示タイプが選択されます。これは、hideとshowの間で切り替えて再び有効にしても機能します。