絶対的なボトム位置のブロックが1ピクセルだけずれていますか？

いくつかのブラウザでは、包含ブロックの底部に相対して配置されたposition: absoluteブロックが1ピクセルずれているようです。絶対的なボトム位置のブロックが1ピクセルだけずれていますか？

WebKitブラウザ（SafariとChrome）は、navブロックとbodyブロックの下部の間に1ピクセルの間隔で表示します。

下部に配置された絶対ブロックを同じ方法で配置するためのブラウザに依存しない方法はありますか？

マークアップ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title>gap test</title> 
    <style type="text/css"> 
body { 
    margin: 0; 
} 

#header { 
    position: relative; 
} 

#logo { 
    background-color: #f88; 
    height: 100px; 
} 

#nav { 
    position: absolute; 
    bottom: 0px; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 

#nav li { 
    list-style-type: none; 
    display: inline; 
} 

#nav li a { 
    background-color: #ccf; 
    margin: 0 10px; 
    padding: 0 10px; 
    border: none; 
} 

#body { 
    background-color: #8f8; 
    height: 100px; 
} 
    </style> 
    </head> 

    <body> 
    <div id="header"> 
     <div id="logo"> 
     Logo. 
     </div> 
     <div id="nav"> 
     <ul> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
     </ul> 
     </div> 
    </div> 
    <div id="body"> 
     Body. 
    </div> 
    </body> 
</html>

出典

2011-01-27 Uh Clem

#nav li acssルールにfloat: leftを追加すると、スペースがなくなります。あなたはアイテムの間に同じ量のスペースを得るために左右のマージンを15pxに増やす必要があります。

出典

2011-01-27 18:16:15 Adrian

素晴らしいです。私は問題を解決するためにフローティングを考えたことはありませんでした。それがなぜ違いますか？ –

私は、クロムとサファリでは、リの内側のアンカー要素を押し広げる余白やパディングがあると思っていました。それを浮動させることによって、他のフロートされた要素だけがこのように「押す」ことができます。私は根本的な原因が何であるかを見るためにそれを真剣に掘り下げませんでしたが、これはクロム/サファリで修正し、FFやIEで負の副作用がない限り – Adrian

それは私のMac上のすべてのブラウザで正常に動作しているようです。問題はjavascriptが原因である可能性があります。

Screenshot

出典

2011-01-27 18:14:18 CharlesJHardy

Macでは面白いとおもいます。私はWindows上でChromeとSafariを試しました。 –

悲しいことに、あなたはおそらく、この質問への回答のいずれかを実装する必要があります：Is there any way to do "if IE" inside of a CSS file?

あなたは少し違ったものをレンダリングするために異なるブラウザ上でカウントすることができます。したがって、ほとんどの場合、あなたが期待していなかったCSS命令（ハックしているかどうか）を取り出す必要があります。

出典

2011-01-27 18:15:16

IEの奇妙さを扱うための優れたテクニックがたくさんあるようです。私の場合、IE *と* FirefoxはWebKitと異なり、IEの条件文は役に立ちません。 –

@Uh Clem：これは私が知っているどのブラウザでも動作します。 –

いいえ条件付きコメントは、IE http://www.quirksmode.org/css/condcom.htmlでのみ動作します。コメントではなくFFをターゲットにすることはできないが、Chrome/Safariをターゲットにしない条件付きコメントを使用して、非IEブラウザをグループとしてターゲティングすることができます。 – Adrian

絶対的なボトム位置のブロックが1ピクセルだけずれていますか？

答えて

関連する問題