IE6/7 は混乱するだろう: 空のテキストノードの高さの問題

序文：

ietester でドキュメントコードを表示するには、debugbar を使用します。すべての ul li にこの text: empty text ノードがあり、一部は span にあります。つまり、li の下に 1 つある必要があり、複数ある場合もあります。一般的には、問題はありません。今日、私は不運なことに遭遇しました。レイアウトを使用しているときに、text: empty text ノードの高さがあり、li の高さではなく、li の表示高さより 4px 高かったことがわかりました。前の段落では、この 1px は痛いですが、4px はなおさらです。この男は長い間私を困惑させていた。

翻訳について考えてみましょう:テキスト: 空のテキストノード。空の場合、なぜ高さがあるのでしょうか? オンラインで検索しましたが、対応する説明は見つかりませんでした。

CSS コードを投稿しましたので、一緒に勉強しましょう。li に font-size:0px を追加しました。問題は解決しましたが、専門家に理由を尋ねたいと思います。

コードをコピー

コードは次のとおりです。

.sidebar_menu{幅:225px; リストスタイル:なし; 位置:相対;}
.sidebar_menu li{ 行の高さ:34px; 幅:225px; 高さ:35px;<SPAN style="COLOR: #ff0000">フォントサイズ:0px;</SPAN> 位置:相対;}
.sidebar_menu li span{ display:block;width:225px;height:34px; overflow:hidden; border-bottom:1px solid #007ac7;}
.sidebar_menu li span a{ width:225px;text-align:left;text-indent:35px;display:block; font:14px/34px Arail,"Microsoft YaHei";color:#333; background:#c3e1f4;}

スクリーンショットをアップロードする

この画像は ietester で非常によく表示されます。レイアウトをクリックすると、テキストが表示されます: 空のテキストノード。