Kompatibilitas browser selalu menjadi masalah umum dalam tata letak CSS, dan para pemula mengalami banyak kesalahpahaman karena hal ini. Jadi berdasarkan pengalaman saya, saya telah merangkum 2 metode untuk menghindari sebagian besar masalah kompatibilitas browser.
Kedua metode ini memiliki keuntungan sebagai berikut:
1. Tidak perlu menggunakan HACK
2. Sederhana dan efektif, Anda dapat memahaminya secara sekilas
3. Tata letak hierarki dan modular
4. Kode lebih masuk akal dan mudah diidentifikasi
Metode 1: Mengatasi ketidakselarasan mengambang yang disebabkan oleh penambahan jarak internal dan eksternal
Kita biasanya perlu menggunakan DIV float untuk mengapung dalam tata letak multi-kolom. Biasanya kita akan menulis 3 DIV untuk tata letak 3 kolom.
.gif)
Untuk mencapai efek ini, kita akan menambahkan margin agar kolom dapat ditempatkan secara langsung, dan juga menambahkan batas, ditambah padding untuk mencegah teks di dalamnya menempel pada batas. Namun sesuatu yang tidak terduga terjadi setelah kode ditulis, terjadi situasi berikut:
.gif)
Kolom ketiga berada di bawah. Ini bukanlah efek yang Anda inginkan. Jadi mari kita menganalisisnya. Ikuti gagasan umum. Lebar keseluruhannya adalah 800px, 200px untuk kolom kiri, 400px untuk kolom tengah, dan 200px untuk kolom kanan. Ini terlihat bagus, tetapi perlu ada celah di antara kolom-kolom ini, jadi Anda harus mengubahnya: 190px untuk kolom tersebut. kolom kiri, 400px untuk kolom tengah, dan 190px untuk kolom kanan.
Namun agar terlihat lebih baik, Anda menambahkan batas. Tapi saya lupa kalau bordernya juga akan bertambah lebarnya. Selain itu, Anda menambah padding kolom: 10px; saya bingung, jadi lebar sebenarnya menjadi: kolom kiri: lebar 200-jarak luar 10-jarak dalam 20-batas. 2=168 , agar tidak terjadi misalignment. Tapi bukankah menurut Anda ini agak rumit? Mungkin Anda memerlukan kalkulator. Akan ada perbedaan tampilan beberapa browser dengan layout ini.
Oke, mari kita bicara tentang metode saya. Menurut pembagian hierarki, saya memisahkan tata letak dan tampilan. Tata letaknya berarti selain lebar dan float, tata letaknya paling banyak menambahkan spasi terluar, sehingga memudahkan saya menghitungnya. Kemudian kita tambahkan DIV lain pada kolom layout khusus untuk menampilkan border, spasi internal dan eksternal, dll. Anda tidak perlu menentukan lebarnya, cukup sesuaikan saja. Untuk memudahkan Anda mengingatnya, saya mengimprovisasi sebuah puisi: lebar tetap harus mengambang, tanpa batas atau tambalan, letakkan DIV di dalamnya, dan gaya yang ditentukan akan berfungsi!
Metode 2: Selesaikan masalah elemen mengambang bagian dalam yang terlepas dari lapisan luar
Untuk membuat katalog produk atau album gambar, kami menggunakan UL atau N DIV untuk mengapung. Efek yang diinginkan adalah sebagai berikut:
.gif)
Namun hal itu menjadi bumerang. Baru-baru ini, tampilannya terlihat seperti berikut, dan batas luarnya telah dipindahkan ke atas:
.gif)
Solusi untuk masalah ini sebenarnya sangat sederhana.
1. Anda dapat menambahkan float:left; ke lapisan luar untuk menyelesaikan masalah.
2. Metode lain adalah dengan menempatkan DIV di akhir untuk menghapus pelampung setelah pelampung berakhir.
3. Tambahkan tinggi atau lebar pada lapisan luar.