Perihal reka letak berpusat dan IE margin berganda bug_CSS/HTML

Hari ini saya google masalah susun atur berpusat CSS, dan hasilnya hampir semua memetik artikel yang sama. Untuk memusatkan dalam IE, tentukan atribut text-align:center dalam elemen Dalam Firefox, pembungkus perlu ditakrifkan. Kemudian tentukan sifat margin-left:auto;margin-right:auto untuk memusatkan blok dalam Firefox. Malah, saya sendiri menggunakan atribut margin, iaitu singkatan margin:auto;, untuk menetapkan pusat. Atribut singkatan jidar menetapkan jidar halaman dalam empat arah mengikut urutan jam: atas, kanan, bawah dan kiri. Perlu diingat bahawa jika anda berfikir bahawa anda hanya mahu memusatkan blok selepas menetapkan atribut margin-top:auto, anda salah. Apabila menggunakan kaedah ini, atribut margin-left:auto;margin-right:auto; Walau bagaimanapun, anda juga boleh memusatkannya dengan menetapkan margin: 0 auto;.
Cara lain ke tengah ialah menggunakan gabungan kiri: 50% + margin-kiri: -375px; Dua kaedah pemusatan adalah seperti berikut.

Salin kod Kod adalah seperti berikut:

/* Kaedah 1 */
body {
latar belakang: #00FF7F;
text-align: center; /* hack untuk cth center alignoutlayout */
}
#wrapper{
background: Aqua
width: 750px;
margin:auto; /* atau margin-left:auto;margin-right:auto;*/
}
/* Kaedah 2 */
#wrapper2 {
kedudukan: mutlak;
lebar: 750px;
kiri: 50%; Saya secara peribadi sentiasa Gunakan kaedah satu untuk memusatkannya, kerana saya merasakan bahawa blok dalam kaedah dua tidak mempunyai ketegaran yang diperlukan, dan kod itu tidak mudah difahami. Jika anda mengurangkan borang dalam Kaedah 2 kepada had tertentu, anda akan melihat bahawa keseluruhan reka letak akan mengalir. Sudah tentu sesetengah orang mahukan kesan ini. :), satu lagi kelebihan kaedah kedua ialah tidak perlu mengatasi tetapan text-align: center; Ini boleh mengurangkan redundansi ke tahap tertentu. Tetapi saya rasa faedah ini boleh diabaikan. Pendek kata, setiap orang hanya mengambil apa yang mereka perlukan mengikut keutamaan mereka sendiri.

Yang lain ialah pepijat margin berganda IE. Malah, pepijat ralat penghuraian ini akan menjejaskan banyak aspek. Jika anda menghadapi jarak yang tidak normal dalam reka letak CSS dalam IE, anda boleh cuba menambah pengisytiharan atribut display:inline;. Dan untuk isu susun atur tertentu, anda perlu menggunakan display:block dan display:inline dalam kombinasi untuk membuat reka letak seperti yang anda mahukan; Saya menghadapi masalah yang sama dalam menu gambar yang dikawal oleh senarai unorder.

Secepat mungkin, pelbagai penyemak imbas mempunyai pepijat css, tetapi kaedah susun atur halaman css telah berkembang hingga ke hari ini dan secara relatifnya peluang untuk membuat anda gila kerana pepijat tidak lagi tinggi. Jika anda mempunyai soalan, semak enjin carian untuk menyelesaikan kebanyakan masalah anda. Jika anda boleh melakukan beberapa percubaan semasa masa lapang anda, anda mungkin boleh bertenang semasa kecemasan.