IE 8と埋め込み問題

Question

私はIE 8パディング設定で問題があります。私のウェブサイトmywebsiteを見ると、中央の部分（メニューバーのすぐ下から始まる）が残りの部分よりも広く、サイトが比例していないことがわかります。このdiv要素に適用するパディング設定のためです。 「フラットシェア」など、h2要素でも同じ問題が発生します。茶色の背景色は、右側の白い三角形の端で終わる要素の領域を超えて拡大します。誰でもこれを解決する方法を知っていますか？それはIE 8でのみ起こり、IE 7とFirefoxで正常に動作します。 は、ここに私のCSS

#page { 
width: 1000px; 
margin: 0px auto; 
padding: 20px 5px; 
background: #FFFFFF; 
} 

.sidebar li h2 { 
height: 40px; 
width: 220px; 
margin: 0 0 0 0; 
padding: 10px 15px 0px 15px; 
background: #890208 url('../images/img05.jpg') no-repeat left top; 
letter-spacing: -1px; 
font-size: 16px; 
color: #FFFFFF; 
} 

UPDATEの抜粋です：私はマシューの提案に従い、明示的に幅と高さを定義しないことを決定しました。 Voila、問題解決。すべての返信をありがとうございました。

Answer 1

問題は、1000pxのすべてを保持するメインdivにインラインスタイルがあることです。その中のすべての要素は同じ幅を持ちます。これは、経験しているすべてのブラウザでは機能しません。 95％のような内側のdivの幅のパーセンテージを試してみてください（この数値はちょうど推測です...あなたのマージン/パディングの大きさによって異なります）。

これは、すべてのdivとメインdivに余白と埋め込みが含まれているためです。同じ幅のdiv内にdivを収めようとしています。両方のdivにはデフォルトのマージン/パディングがあります。さらに、予期しない動作をしているパディングを明示的に宣言しました。

Answer 2

他のブラウザに影響を与えることなく、埋め込みの問題を相殺するには、条件文を使用する必要があります。これがreset.cssファイルが使用されている主な理由ですが、この後半の段階でリセットを実装することは、それが価値がある以上の問題をもたらすことは間違いありません。

<!--[if IE]> 
    link a stylesheet that deals with the offset 
<![endif]--> 

これは多くの可能な解決策ですが、動作します。

Answer 3

"If IE 8"を指定したいとは思うが、これはDaniel氏が言うような別のスタイルシートを使って対処することができる。このように

<!--[if IE8]> 
    use a different style sheet for IE 8 here.css 
<![endif]--> 

ORこの問題に遭遇したとき、私はいつもやっていることができるし、divの全幅からパディングするだけです。 （それはいつも私のために働いていたそのチート）。たとえば、DIVの幅が200ピクセルで、コンテンツが左側に20ピクセルのパディングを必要とする場合などです。私は左右のパディングを設定します。 20pxの左と20pxの右があるとしましょう。合計で40です.DIVの幅を160ピクセルに設定してください。