serasi css iaitu kaedah penulisan

CSS ialah salah satu kemahiran penting dalam pembangunan bahagian hadapan, tetapi pelayar yang berbeza mungkin mempunyai penghuraian dan sokongan yang berbeza untuk CSS Terutamanya dalam pelayar IE, perbezaan ini lebih jelas. Untuk memastikan tapak web dipaparkan dengan betul dalam pelayar IE, kita perlu memahami isu keserasian CSS dalam IE. Artikel ini akan berkongsi beberapa kaedah penulisan CSS biasa yang serasi dengan IE untuk membantu pembangun mengatasi masalah ini.

1. Isu keserasian pemilih

IE menghadapi masalah menyokong pemilih CSS tertentu. Sebagai contoh, pemilih kelas pseudo nth-child() dalam CSS3 tidak boleh dihuraikan dengan betul dalam IE7 dan ke bawah sebagai tambahan, dalam IE 6 dan ke bawah, ia tidak menyokong penggunaan pemilih "+" dan "~" untuk memilih; elemen yang sama. Oleh itu, untuk memaparkan dengan betul dalam IE, anda boleh menggunakan JavaScript untuk mencapai kesan pemilih ini, atau menggunakan pemilih sandaran dalam CSS.

Contoh:

/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
  margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
  padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }

2. Isu keserasian peratusan lebar

Dalam IE6, apabila lebar elemen ditetapkan dalam peratusan, jika lebar elemen itu elemen induk ialah Jika lebar juga ditetapkan dalam peratusan, lebar elemen mungkin tidak normal. Untuk menyelesaikan masalah ini, anda boleh menetapkan "display:inline-block" pada elemen induk dan kemudian tetapkan lebarnya kepada 100%.

Contoh:

/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
  /* 在IE6中,需要在父元素上设置display:inline-block */
  display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
}

3. Isu keserasian kedudukan mutlak

Dalam IE, kedudukan elemen kedudukan mutlak tidak selalu relatif kepada elemen yang paling hampir dengannya . Letakkan elemen induk, mungkin relatif kepada elemen badan. Untuk menyelesaikan masalah ini, anda boleh menetapkan "kedudukan:relatif" pada elemen induk.

Contoh:

/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

4. Kosongkan isu keserasian terapung

Dalam IE, elemen terapung tidak memaksa elemen induk untuk menduduki ketinggian, yang akan menyebabkan banyak masalah susun atur. Oleh itu, kita perlu membersihkan terapung. Cara biasa ialah menambah elemen kosong pada penghujung elemen induk dan menetapkannya kepada "clear:both", tetapi kaedah ini tidak selalu berfungsi dalam IE. Terdapat beberapa cara untuk menyelesaikan masalah ini, salah satunya ialah menambah "overflow:hidden" pada elemen induk elemen terapung, yang akan memaksanya untuk menduduki ketinggian.

Contoh:

/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
  overflow: hidden;
  zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
  float: left;
  width: 50%;
}

5. Isu keserasian ketelusan latar belakang

Dalam IE, jika latar belakang ditetapkan untuk elemen dan ketelusan (kelegapan) ditetapkan, Teks dan sub-elemen elemen juga akan dibuat telus. Untuk menyelesaikan masalah ini, anda boleh menggunakan kaedah penapis unik IE untuk menambah ketelusan.

Contoh:

/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
  background-color: #000;
  opacity: 0.5;
  /* 在IE中，使用滤镜来添加透明度 */
  filter: alpha(opacity=50);
}

6. Isu keserasian model sempadan

Versi IE6 dan ke bawah menggunakan "model kotak IE", yang berbeza daripada spesifikasi W3C . Ini bermakna apabila anda menetapkan lebar elemen dalam IE, lebar sebenar elemen tersebut akan lebih besar daripada nilai yang dikira secara langsung dengan mengira jumlah sempadan, padding dan lebar kandungan. Untuk mengendalikan sempadan dengan betul dalam IE, anda boleh menggunakan penggodaman dalam CSS atau pengiraan khas dalam JavaScript.

Contoh:

/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
  width: 400px;
  height: 300px;
  padding: 10px;
  /* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
  border: 1px solid #000;
  background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
  width: 422px;
  height: 322px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

7. Isu keserasian warna latar belakang pautan

Dalam IE, apabila menetapkan warna latar belakang untuk pautan, jika pautan adalah status aktif atau status yang dilawati, warna latar belakang tidak akan berkuat kuasa. Untuk menyelesaikan masalah ini, anda boleh menambah gaya aktif dan dilawati secara manual pada pautan.

Contoh:

/* 在IE中设置链接背景色需要同时设置活动和已访问状态，否则会失效 */
a {
  background-color: #f00;
}
a:visited,
a:hover,
a:active {
  background-color: #f00;
}

Ringkasan

Di atas ialah cara biasa menulis CSS yang serasi dengan IE. Sudah tentu, dalam amalan kita mungkin menghadapi lebih banyak masalah keserasian, yang memerlukan kita menyelesaikan melalui ujian dan percubaan berterusan. Proses untuk serasi dengan IE mungkin menyusahkan, tetapi ini adalah salah satu kemahiran yang sekurang-kurangnya perlu kita fahami dan kuasai, kerana pada hakikatnya, pelayar IE masih mempunyai bahagian pasaran tertentu, terutamanya dalam beberapa persekitaran perusahaan lama.

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