Internet Explorer 7でdivの高さを設定する際の問題点

私は、かなりのカーブの背景画像を持つdivを持っているので、すべてのブラウザで角が丸くなります。Internet Explorer 7でdivの高さを設定する際の問題点

インターネットエクスプローラでは、背景画像の後に背景色付きの線が表示されるという問題があります。 divの高さを設定すると、FirefoxとChromeの両方でdivの高さが縮小されますが、IEでは何も調整されません。

ここに私のCSSがあります。 CSSの残りの部分はIE（とFF/Chrome）にも適用されます。

#MSBottomSlot .topCurve { 
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat; 
    height:10px; /* Changing this value does nothing in IE */ 
    width:100%; 
}

私が欠けている高さに関するいくつかのIE「落とし穴」はありますか？ここで

は、いくつかの追加の詳細、次のとおりです。

ラインはFFやChromeには表示されません。
ページにはJavaScriptがほとんどありません。これはどのようにこのレンダリングに影響しますか。
divへのその他の変更がdivに適用されます。

出典

2011-01-21 Peach

オーバーフローを追加することがありますか？ – kapa

を隠された私は右に理解することができれば、高さは行の高さとフォントサイズのbecasue行われません。あなたは追加する必要があります

line-height: 0; 
font-size: 0;

出典

2011-01-21 20:00:32

これは可能です。私はコンテンツを持っていませんが、まだコンテンツが出るかもしれないスペースを表示しているかもしれません。 – Peach

これはコンテンツの有無に関係なく動作します。 –

これが問題でした。提案に感謝します。 – Peach

は、ブラウザがHTMLドキュメントの

最初の行は、あなたはまた、このような、より伝統的なXHTMLのDOCTYPEを使用することができ

<!DOCTYPE html>

でなければなりませんquirksmodeに入らないようにDOCTYPEを設定することを忘れないでください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

しかし、私はhtml5に準拠し、IEでうまく動作する最初のタイプをお勧めしますDO HTML5、そしてそれはひどいXHTMLのDOCTYPEよりもそんなに良く見える;）

また、あなたがそうあなたの要素がdisplay: blockまたはdisplay: inline-blockまたは類似であることが必要であり、inline要素、唯一のブロックレベル要素に高さを適用することはできませんことを覚えておいてください。）

出典

2011-01-21 17:12:06

この提案をお寄せいただきありがとうございます。私はそれを調べ、これが役立つかどうかを見ていきます。（申し訳ありませんが、私はまだ+1することができません、十分な担当者ではありません） – Peach

Doctypeは既に設定されていたので、これは問題ではありませんでした。しかし、提案をありがとう。 – Peach

オーバーフローを適用してみてください。あなたのCSSに

#MSBottomSlot .topCurve { 
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat; 
    height:10px; /* Changing this value does nothing in IE */ 
    width:100%; 
    overflow:hidden; 
}

出典

2011-01-21 17:15:50

良い提案ですが、私は見て、それがどのように判明したかをお知らせします。 – Peach

オーバーフローは問題ではありませんでした（行の高さは問題ありません）。ご協力いただきありがとうございます！ – Peach

Internet Explorer 7でdivの高さを設定する際の問題点

答えて

関連する問題