IEで空のdivの高さの問題

空のdivをその中に背景色で実装したいと思います。IEで空のdivの高さの問題

<html> 
<head> 
    <style> 
     .dark_green { 
      background-color: #00D100; 
      width: 20px; 
      height: 4px; 
     } 

    </style> 
</head> 
<body> 
    <div class="dark_green"></div> 
</body> 
</html>

IE7/8/9では、このdivの高さは4pxではなく、自動的に19pxに変更されます。 FFや他のクロムの下では正しいです。

提案がありますか？

出典

2012-03-28 Anonymous

私はこの解決策を見つけた：

font-size: 4px;

出典

2012-03-28 21:27:21

それは一種のあなたがやろうとしているかに依存します。

.dark_green { 
     [...] 
     line-height:4px; 
    }

または

.dark_green { 
     [...] 
     overflow:hidden; 
    }

なり仕事の両方：働くだろうがいくつかあります。

これは、DIVのテキストが（たとえ空白の場合でも）19pxのレンダリングされた行の高さを持つためです。問題のブラウザは、テキストを切り捨てないようにフォールバックとして設定しているものではなく、その値を使用しています。テキストを小さくする（font-size:4px;）、行の高さを小さくする（line-height:4px;）、または切り取るテキスト（overflow:hidden;）を指定すると、問題が解決されます。私は、この文脈でのフォントサイズを使用することはありません

な理由は以下のとおりです。

それが理由だけで機能しますが、新しいフォントサイズを適用するたときに継承されている行の高さ、あなたは可能性があります正しいプロパティを設定するだけです。
一部のブラウザでは場合、ユーザはより大きな最小セット、あなたの修正wouldn」を持っていたことを意味し、4PX （FF上11px、ないあなたがIEでこれを設定することができるかどうか確認してください）よりも大きい最小フォントサイズを持っています仕事。

出典

2012-03-28 21:33:07

quirks modeを逃れるために、このよう<!DOCTYPE html>のような非常に最初の行としてDOCTYPEを追加します。これは重要なことです。そうしないとIEに無限の問題が発生します。

これを実行すると、元のコードはFirefox/Chromeと同じようにIE7以上で動作します。

出典

2012-03-28 23:02:11 thirtydot

崩壊させたいdivにアイテムを追加し、そのエレメントの表示をnoneに設定します。

問題のdivが

<div class="collapseToZero"></div>

はこのような何かを追加している場合：

<span class="nothing"></span>

をし、クラス

.nothing{display:none;}

ために、このスタイルを追加し、結果のHTMLは次のようになります。

<div class="collapseToZero"> 
    <span class="nothing"></span> 
</div>

今や、7はフォントサイズではなく、高さがゼロの問題divをレンダリングします。

出典

2013-02-06 23:43:05

もう1つの方法 - これをミックスにスローするだけです：divsのコンテンツとして空のコメントを追加します。はい、それは余分なマークアップを追加するが動作します：

<div><!-- --></div>

出典

2013-09-26 11:00:17

IEで空のdivの高さの問題

答えて

関連する問題