css iaitu kaedah penulisan yang serasi

CSS ialah bahagian yang sangat penting dalam reka bentuk web, tetapi dalam penyemak imbas yang berbeza, keserasian CSS adalah isu yang sangat menyusahkan. Terutama dalam pelayar IE, masalah keserasian CSS lebih menonjol. Oleh itu, anda mesti memberi perhatian kepada keserasian pelayar IE semasa menulis gaya CSS Artikel ini akan memperkenalkan beberapa kaedah penulisan serasi IE yang biasa digunakan.

1. Isu keserasian pelayar IE biasa

Dalam pelayar IE, isu keserasian CSS biasa adalah seperti berikut:

1. Model kotak : IE6 dan IE7 tidak menyokong model kotak standard, tetapi gunakan model kotak IE Ini mengakibatkan percanggahan antara lebar dan ketinggian sebenar elemen dan lebar dan tinggi reka bentuk apabila menetapkan lebar dan tinggi.
2. Ketelusan imej PNG24: IE6 tidak menyokong ketelusan imej PNG24 Anda perlu menggunakan JavaScript untuk menetapkan ketelusan secara berasingan untuk IE6.
3. Kosongkan terapung: IE6 tidak menyokong pembersihan automatik terapung oleh penyemak imbas Anda perlu menggunakan clear:kedua-duanya untuk mengosongkan terapung secara manual.
4. Kedudukan: IE6 tidak menyokong position:fixed, anda boleh menggunakan position:absolute untuk mencapai kesan yang sama.

2. Kaedah penulisan yang biasa digunakan yang serasi dengan pelayar IE

1. Latar belakang gambar tidak diliputi dalam pelayar IE6

Dalam IE6, jika Jika elemen mempunyai kedua-dua imej latar belakang dan set warna latar belakang, imej latar belakang mungkin tidak diliputi oleh warna latar belakang. Pada masa ini, anda perlu menambah atribut _filter pada elemen bekas dan tetapkan nilainya kepada "warisan".

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

2. Sempadan tidak diliputi dalam penyemak imbas IE6

Dalam IE6, apabila dua elemen blok atau dua elemen sebaris bertemu, sempadan akan muncul Tidak dilindungi. Pada masa ini, anda boleh menyelesaikan masalah ini dengan menetapkan div kosong.

<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>

Kod di atas mencetuskan mekanisme hasLayout pelayar IE dengan menetapkan position:relative dan zum:1, dan memaparkan sempadan dengan menetapkan elemen div kosong.

3. Masalah pertindihan jidar di bawah pelayar IE6

Dalam IE6, apabila jidar atas dan jidar bawah dua elemen bersebelahan bertindih, situasi bertindih jidar akan berlaku. Pada masa ini, anda boleh menetapkan bahagian atas pelapik untuk elemen di atas untuk mengelakkan pertindihan jidar.

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

.parent{
    padding-top:1px;    
}

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

4. Masalah ketelusan imej PNG24 di bawah IE6

Untuk menyokong ketelusan imej PNG24 dalam IE6, anda boleh meletakkan lapisan div pada imej dan letakkan dalam ini Tambah sekeping kod JavaScript pada div.

Kod HTML:

<code><div class="png">
    <img src="images/logo_bg.png" />
</div></code>

Kod 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>

Dalam kod di atas, atribut _behavior boleh mengikat kod JavaScript pada elemen dan meletakkannya di dalamnya Pelaksanaan dalaman.

5. Pelaksanaan kedudukan tetap di bawah IE

Dalam pelayar IE, atribut position:fixed tidak boleh disokong, tetapi kesan serupa boleh dicapai melalui JavaScript.

Kod 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>

Perlu diambil perhatian bahawa jika ia serasi dengan pelayar IE7 dan ke atas, DOCTYPE harus ditetapkan, jika tidak IE akan menjadikan halaman dalam mod pelik dan keserasian isu mungkin berlaku.

Artikel ini meringkaskan beberapa kaedah penulisan serasi CSS IE yang biasa digunakan, saya harap ia akan membantu semua orang. Dalam projek sebenar, kita harus terus merumuskan dan meneroka kaedah penulisan serasi IE yang lebih baik untuk meningkatkan keserasian dan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci css iaitu kaedah penulisan yang serasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!