IE の一般的な 10 のバグと解決策_html/css_WEB-ITnose

1. IE6 ゴーストテキストのバグ

この記事を書く前に、私はこのバグに遭遇しました。なかなか奇妙で面白いですね。どこからともなく重複したテキストが、IE6 では元のテキストに近く表示されます。 (注釈: バグのデモについては、Explorer 6 Duplicate Character Bug を参照することもできます)。修正できなかったので検索したところ、やはり IE6 の別のバグでした。

これには多くの回避策がありますが、私の例ではどれも機能しませんでした（サイトの複雑さのためにいくつかの回避策は使用できませんでした）。そこでハックを使いました。元のテキストの後にスペースを追加すると、問題が解決するようです。

しかし、私は Hippy Tech Blog から、問題の背後にある理由は HTML コメント タグにあることを知りました。 IE6では正しく表示できません。以下は彼が提案した解決策のリストです:

回避策 :

1. コメントを タグで囲む
2. コメントを削除する
3. フロントフロート {display: inline;} にスタイルを追加する
適切な浮動 div に負のマージンを使用します
元のテキストに追加の  (10 個のスペースなど) を追加します (巧妙な方法)

2. 相対位置とオーバーフローの非表示 (Position Relative と Overflow Hidden)

I JQuery チュートリアルを準備していたときに、希望するレイアウトを実現するために多くのオーバーフロー非表示を使用したため、この問題に何度も遭遇しました。

この問題は、親要素のオーバーフローがhiddenに設定され、子要素がposition:relativeに設定されている場合に発生します。

CSS-Trick には、このバグを示す素晴らしい例があります。インターネット エクスプローラーでの位置: 相対とオーバーフロー

解決策

: 親要素に相対的な位置: を追加します

3. IE の最小高さ

これは非常に簡単で、IE は min-height 属性を無視します。 。以下のハックを使用して修正できます。ダスティン・ディアスに感謝します。

このソリューションは、IE6、Mozilla/Firefox/Gecko、Opera 7.x+、Safari1.2 で非常にうまく機能します。

解決策

:

selector {

min-height:500px; height:500px;

4. バイキュービック画像のスケーリング (バイキュービック画像)スケーリング)


これはきっと気に入っていただけるでしょう。 IE の画像スケーリングの貧弱さが気になりませんか? IE を他のブラウザと比較すると、IE の縮小画像は他のブラウザほど見栄えがよくありません。

解決策

:

img { -ms-interpolation-mode: bicubic }

5, P透明度NGしたがって、透明な画像を使用したいが、GIF では希望の品質が得られない場合は、PNG 用のこのハックが必要になります。 PNG 画像を背景として使用する場合は、背景の位置を設定できないことに注意してください。

これはみんな知ってると思うけど、今後の参考のためにここにリストしておきます。

解決策:

img {
フィルター: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

}

6.透明な背景 :

すべきではありませんFirefox と Safari では、デフォルトで iframe の背景が透明に設定されているため、この問題が発生しますが、IE ではそうではありません。これを実現するには、allowTransparency 属性を使用し、次の CSS コードを追加する必要があります。

解決策

/* iframe 要素内 */