2011-08-02 8 views
0

これは、要素ID f3cの上のパディング+下のパディングになります。私は2つの写真 - IE8とIE9の1つを添付しました。IE9はIE8と比較して4pxのオフセットを持っています

私はデバッガから関連情報をキャプチャしようとしました。基本的には、フォーム内にフィールドセット内のリンクがあります。フィールドセットはページが検証するように設定されています。

リンク(相対位置:9px)を使用しています。

何らかの理由で(padding-top:2pxとpadding-bottom:2px)をカウントしていない限り、IE8がIE8の計算から4pxに追加される理由はわかりません。

スクリーンショットに基づいて実際のDOCTYPE

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

IE8

IE9

答えて

1

、あなたはインライン要素にパディングを追加しています。追加

試してみてください。

display: inline-block; 

そして、そこから調整してください。

編集:

インライン要素は適用されませんマージン/パディング/幅/高さ

ブロック要素は、マージン/パディングを持つことができます(まあ、彼らはしかし、すなわちようなブラウザは非標準的な振る舞いを持つべきではありません)/width/heightであるが、要素を垂直に積み重ねる。

インラインブロックは、それらの間のハイブリッドの一種です。他のインライン要素を縦に並べることができますが、margin/padding/width/heightを追加することもできます。

私の一般的なルールは、ブロックレベルの要素は、インラインがページ内のコンテンツ(太字、斜体など)であるページ(フレームワーク)の重い構成要素であるということです。インラインブロックでは、マージン、パディングを使ってインライン要素を少しだけ間引くことができます。

注:古いバージョンではまだピクセルが完璧ではないことにご注意ください。

+0

私はもう少しの情報で私の答えを更新しました。 –

0

Benの答えに加えて、YahooのYUI Reset CSSを使用することを検討してください.YUI Reset CSSは、ブラウザ間の一貫性のないスタイルを解決します。

これを使用するには、この行をHTMLページのhead要素に追加します。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> 

あなたはそれがhere何を参照するには、リセットCSSのフル、unminifiedバージョンを表示することができます。

+0

私は何の条件も見ません...これは何ですか...私は、すべてのbroswerの不一致を説明するかなり小さなファイルだと思います...おそらくそれは特定のものに焦点を合わせましたか? –

+0

@ stack.user.0 CSS上の「リセット」は、ブラウザ間で異なる可能性があるデフォルトを上書きするだけで、上に追加するCSSはすべてのブラウザで同じように見えます。 – joshuahedlund

0

あなたは実際にスクリーンショットのようにdoctypeの前にコメントタグを持っていますか?その場合は、quirksモードになっています。コメントタグを削除します。

関連する問題