Rumah >hujung hadapan web >tutorial css >Atribut blok sebaris untuk keserasian simulasi_Pertukaran pengalaman

Atribut blok sebaris untuk keserasian simulasi_Pertukaran pengalaman

WBOY
WBOYasal
2016-05-16 12:06:151516semak imbas

Pada masa kini, terdapat lebih banyak permintaan untuk penggunaan atribut blok sebaris Malangnya, hanya Firefox3 beta, IE8 beta, Opera dan Safari menyokong atribut blok sebaris (Nota: Pada asalnya hanya Opera dan Safari yang menyokongnya), tetapi. IE6 dan IE7 boleh lulus Trigger hasLayout untuk mensimulasikan Firefox2 mempunyai -moz-inline-box dan -moz-inline-stack atribut peribadi (perbandingan kedua-dua atribut ini dipetik daripada "Dua Contoh Aplikasi Paparan:sebaris-" Qin Ge. blok").

Dalam aplikasi sebenar, -moz-inline-box akan menghadapi masalah seperti penjajaran antara elemen Walaupun Firefox juga mempunyai atribut peribadi -moz-box-align untuk membantu menyelesaikan masalah penjajaran, ia masih sukar untuk diramalkan bahawa akan ada banyak masalah , dan secara relatifnya -moz-inline-stack berkelakuan lebih seperti inline-block, yang boleh diuji dalam Firefox3. Walau bagaimanapun, terdapat juga pepijat apabila menggunakan -moz-inline-stack Jika elemen luar paparan:-moz-inline-stack adalah display:inline;, ia akan menjadikan pautan yang terkandung di dalamnya tidak boleh diklik dalam Firefox. Ini memerlukan Use position:relative;

Kod akhir yang kami simulasikan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

display:inline-block; /*Firefox3 beta, IE8 beta, Opera, sokongan Safari, hasLayout*/ yang mencetuskan elemen sebaris di bawah IE
display:-moz-inline-stack; atribut peribadi, juga tersedia Gunakan -moz-inline-box */

zum:1; /*hasLayout dicetuskan di bawah IE*/
*display:inline; menetapkan elemen blok kepada sebaris akan Jadikan paparan:sebaris serupa dengan paparan:sebaris-blok*/

teks-inden:-9999px
*teks-inden:0; 0;
line -height:0; /* Jika anda perlu menyembunyikan teks, anda boleh menggunakan empat atribut ini */
/*Selain itu, anda juga boleh menggunakan kaedah yang lebih mudah untuk menyembunyikan teks di atas: line-height: nilai super besar; font-size:0 ; */

overflow:hidden; /* Hide overflow content */

vertical-align:mid; baris, untuk sisihan Opera yang agak besar */

lebar:? px; /*? Untuk sebarang nilai bukan automatik*/
tinggi:? px; /*? Untuk sebarang nilai bukan automatik*/

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn