css ie互換の書き方

CSS は Web デザインの非常に重要な部分ですが、異なるブラウザーでの CSS の互換性は非常に厄介な問題です。特に IE ブラウザでは、CSS の互換性の問題がより顕著になります。したがって、CSS スタイルを記述する場合は、IE ブラウザの互換性に注意する必要があります。この記事では、一般的に使用される IE 互換の記述方法をいくつか紹介します。

1. IE ブラウザーの一般的な互換性問題

IE ブラウザーでは、一般的な CSS 互換性問題は次のとおりです:

1. ボックス モデル: IE6 および IE7 は標準のボックス モデルをサポートしていませんが、IE ボックス モデルを採用しているため、実際の幅と高さを設定するときに、要素の幅と高さが設計上の幅と高さと異なるようにしてください。
2. PNG24 画像の透明度: IE6 は PNG24 画像の透明度をサポートしていません。IE6 用に透明度を個別に設定するには、JavaScript を使用する必要があります。
3. フロートのクリア: IE6 はブラウザによるフロートの自動クリアをサポートしていません。フロートを手動でクリアするには、clear:both を使用する必要があります。
4. 位置決め: IE6 はposition:fixedをサポートしていません。position:absoluteを使用して同じ効果を実現できます。

2. IEブラウザと互換性のある一般的な記述方法

1. IE6ブラウザでは画像の背景はカバーされません

IE6では、要素に背景画像と背景色の両方が設定されている場合、背景画像がカラーカバレッジは対象外となります。このとき、コンテナ要素に _filter 属性を追加し、その値を「inherit」に設定する必要があります。

<code>.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}</code>

2. IE6ブラウザでは枠線が隠れない

IE6では、2つのブロック要素または2つのインライン要素が接する場合、枠線は隠れません。このとき、空の div を設定することでこの問題を解決できます。

<code><div class="box">
    <div class="inner"></div>
</div>

.box{
    background:#fff;
    border:1px solid #ccc;
    position:relative;
    zoom:1;
}
.inner{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}</code>

上記のコードは、position:relativeとzoom:1を設定することでIEブラウザのhasLayoutメカニズムをトリガーし、空のdiv要素を設定することで境界線を表示します。

3. IE6ブラウザでのマージンの重なりの問題

IE6では、隣接する2つの要素のmargin-topとmargin-bottomが重なると、マージンの重なりが発生します。このとき、マージンの重なりを避けるために、上記の要素にpadding-topを設定できます。

<code><div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}</code>

4. IE6 での PNG24 画像の透明度の問題

IE6 で PNG24 画像の透明度をサポートするには、画像上に div のレイヤーを置き、その div に JavaScript コードを追加します。

HTML コード:

<code><div class="png">
    <img  src="/static/imghwm/default1.png" data-src="images/logo_bg.png" class="lazy" alt="css ie互換の書き方" >
</div></code>

CSS コード:

<code>div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
        }(this)
    );
}</code>

上記のコードでは、_behavior 属性は JavaScript コードを要素にバインドし、その中で実行できます。

5. IE での固定位置の実装

IE ブラウザでは、position:fixed 属性はサポートされませんが、JavaScript を通じて同様の効果を実現できます。

JavaScript コード:

<code>function fixedPosition() {
    var obj = document.getElementById("fixed_obj");
    var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
    obj.style.top = top + "px";
}

window.onscroll = fixedPosition;

//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();</code>

IE7 以降のブラウザと互換性がある場合は、DOCTYPE を設定する必要があることに注意してください。そうしないと、IE が奇妙なモードでページをレンダリングし、互換性の問題が発生する可能性があります。

この記事は、よく使われる CSS IE 互換の記述方法をまとめたものです。皆様のお役に立てれば幸いです。実際のプロジェクトでは、Web ページの互換性とユーザー エクスペリエンスを向上させるために、IE と互換性のあるより良い記述方法をまとめ、検討し続ける必要があります。

以上がcss ie互換の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。