Penyelesaian kepada masalah yang span tidak dapat menentukan lebar dalam Firefox atau IE_HTML/Xhtml_Webpage Production

Salin kod

Kod adalah seperti berikut:

span {
warna latar:#ffcc00
lebar:150px ; "text/ css" mce_bogus="1">span {
warna latar:#ffcc00
lebar:150px
} 🎜>< ;badan>
tetap lebar
, didapati ia tidak sah sama ada dalam Firefox atau IE.

Dengan merujuk takrif lebar dalam piawaian CSS2, kami mendapati bahawa atribut lebar asal dalam CSS tidak sentiasa sah Jika objek ialah objek sebaris, atribut lebar akan diabaikan. Firefox dan IE pada asalnya melakukan ini dengan mengikut piawaian.


Mengubah suai span untuk menyekat jenis dan menetapkan apungan bukanlah penyelesaian yang sempurna

Tambah atribut paparan dalam CSS span dan tetapkan span untuk menyekat Elemen jenis supaya lebarnya adalah betul Ia berfungsi, tetapi ia juga memisahkan teks sebelum dan seterusnya pada baris yang berbeza. Dengan cara ini, span sebenarnya menjadi div.



Salin kod


Kod adalah seperti berikut:

span { background-color: #ffcc00; display:block; width:150px;} Ramai orang akan mencadangkan menambah apungan atribut CSS yang lain, yang sememangnya boleh menyelesaikan masalah dalam keadaan tertentu. Sebagai contoh, dalam contoh kami, jika tiada teks di hadapan span, ia sememangnya boleh dilaksanakan. Tetapi jika ada, teks sebelum dan seterusnya akan disambungkan bersama, dan span akan berjalan ke baris kedua.

Salin kod

Kod tersebut adalah seperti berikut:

span { background-color: #ffcc00; display:block; float:left; width:150px;}

Penyelesaian yang sempurna untuk menetapkan lebar rentang

Definisi CSS bagi kod berikut adalah sempurna Menyelesaikan masalah tetapan lebar rentang. Memandangkan penyemak imbas biasanya mengabaikan sifat CSS yang tidak disokong, sebaiknya tuliskan baris display:inline -block di penghujungnya, supaya dalam Firefox, jika Firefox 3 akan datang dicapai, baris ini akan berfungsi. Kod boleh serasi dengan pelbagai versi pada masa yang sama.

Salin kod


Kod tersebut adalah seperti berikut:

< ;!- - span { background-color:#ffcc00; display:-moz-inline-box: inline-block;