IE8

2011-08-06 9 views
2

に1ピクセルの高さのdivを作成する方法I 1pxの高さのラインを作成するために、次のコードを持っている:IE8

コードはIE8でしかし、Firefoxで正常に動作します

は、それが10pxの高さの線で表示され

<div style="width:300px; height:1px; background-color:#ff3300; margin-top: -1px;"></div> <!-- top red line --> 
とか、ぐらい。 IEに指定された高さを考慮させるにはどうすればよいですか?

編集:

  • 私はちょうど1PXするmin-heightプロパティを設定しようとしたが、それはどちらか動作しませんでした。
  • max-height
  • はあまりに
  • はIEはすべて私のCSSルールを無視しているのはなぜline-height 1から

を助けない設定IEによって無視されますか?

+0

予想外のパディングを禁止するには、CSSを適切にリセットしてください。 –

+0

'div'にはデフォルトで特別なスタイルがありません。 CSSのリセットのコンセプトは、多くの人に推奨されている練習ではありがたいことです。 –

+0

ある種の行を作成しようとしているようです。下の要素の代わりに 'border-top:#ff3300 solid 1px;'を使うのはなぜですか? – sqwk

答えて

9

フォントサイズを1pxに設定するだけです。 IEはこのdivの高さをフォントサイズに制限しています。

+0

+1 JSフィドルでうまく動作します。 – wowpatrick

+0

はい、それが解決策でした。 –

0

セットline-heightおよびfont-sizeから1px。

+0

これはまた動作する必要があります –

0

パディングを0にリセットするのとは別に、他の要素(おそらく上記のような)と関係があります。特に浮かれている場合。また、両方をクリアしてみてください。また、それが表示されていないことを確認してください:インライン;どこでも...これはデフォルトでブロックされ、ブロックされるべきです。

実際には文脈なしに暗闇の中で突っ込んでいます。

0

私の提案:これはブラウザのスクロールバーの問題です。 ちょうどあなたが置く ボディ{マージン:0;パディング:0;}すべてのブラウザで行を表示することはできません。

IE7スクロールバー上矢印を押し下げるとその行が表示されます。

1

@Laurent、あなたはまだ height:1px; line-height:1px;フォントを使用するのにもかかわらず、必要な1ピクセルのdiv要素を取得することができない場合:通常1ピクセル/ Arialの1ピクセル。 Webページコードの上部にあるDTD(Document Type Definition)を確認する必要があります。これを試すことができます:

<!DOCTYPE HTML> 
<html> 
... 
</html>