IE：水平スクロールのパディング

私は適切な解決策を見つけることができないIEの問題に直面しています。IE：水平スクロールのパディング

ChromeとIEを比較すると、padding-rightを追加するとChromeのコンテンツの幅とIEの幅の一部から除外されます。

ここに適切な修正がありますか、ここでブラウザ固有のスタイルにする必要がありますか？

説明が十分でない場合は、下記のスニペットをご覧ください。 ChromeとIEの比較

.container { 
 
    width: 480px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    padding-right: 20px; 
 
    overflow: auto; 
 
    background: red; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 10px; 
 
    background: white; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-07-28 Clem

（a）テストしているIEのバージョンと、（b）IEが標準モード、互換モード、またはクォークモードでページをレンダリングしているかどうかを指定してください。 – Simba

私はパディング右を追加すると、コンテンツのChromeの幅とIEの幅自体の一部から除外されることに注意してください。

これは、ページが[Quirks]モードで表示されるときのレンダリングの主な違いの古典的な説明です。

ページが有効なHTML（すなわち、すべての正しい<html><head>...</head><body>...</body></html>タグを含む）であることを確認し、有効なDOCTYPE宣言で始まるようにレンダリングモードを修正することができます（使用できるdoctypesがいくつかありますが、 1つはちょうど<!DOCTYPE html>です）。

これらの修正を加えれば、IEはあなたのパディングをChromeとまったく同じようにレンダリングすることがわかります。

出典

2016-07-28 15:04:32 Simba

IE：水平スクロールのパディング

答えて

関連する問題