IE_Experience 交換で CSS 属性オーバーフローを使用するバグを修正

テスト HTML ファイルを作成します。次のキー コード スニペット

コードをコピー コードは次のとおりです。

<code> <br><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="ライセンス" phpc ngtphpcn> <br> </a><a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">私の著作権を遵守します</a> <br> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">私の著作権を遵守してください </a> <br> <a href="http://creativecommons.%20org/licenses/by-nc-sa/2.5/cn/" rel="license">obey 私の著作権 </a> <br> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5%20/cn/" rel="license">obey my copyright</a> <br> </code>

上記のコードでは、次の CSS を適用します。

コードをコピーします コードは次のとおりです。

div{
width: 60%; }

pre{
オーバーフロー: 自動;
背景色: #fff0f5;
マージン: 1.6em 0;
パディング: 0 1.6em;
}

Firefox での上記のコードの表示は予測可能です。

ただし、IE6 ではオーバーフロー効果を表示できません。

図 1 IE6 での影響

IE7 の表示も少し異なり、煩わしい右スクロール バーが表示されます。

図 2 IE7 での影響

IE6 のバグは、それを含むブロック、つまり

コードをコピー コードは次のとおりです。

pre{
オーバーフロー: 自動;
背景色: #fff0f5;
マージン: 1.6em 0;
パディング: 0 1.6em;
width: 90 % ;
}

このときIE6のスクロールバーが出てきますが、右スクロールバーが追加されただけでIE7と同じ動作になります。

追加の右スクロール バーがある理由は、IE が常に要素の高さの合計よりも内側に下部スクロール バーを追加するため、要素の高さの一部が下部スクロール バーによって占められ、追加できないためです。が完全に表示されるようにするため、IE 右側のスクロール バーが自動的に追加され、スクロール後にブロックされた要素の内容も確認できるようになります。

最後に、IE の右側にあるスクロール バーを削除するために、次の CSS を包含ブロック

コードをコピー コードは次のとおりです。次のように:

pre{
オーバーフロー : auto ;
背景色 : #fff0f5 ;
margin : 1.6em 0 ;
padding : 0 1.6em ; width: 90%;
overflow-y: hidden;
}

このようにして、同じオーバーフローを次の場所に作成します。 Firefox、Opera、Safari と同様の IE: 自動効果。

実際のアプリケーションでは、この効果はすべての固定形式要素 (通常は pre 要素)、最も一般的にはコード ブロックに適用できます。