Adakah Elemen Blok Bersarang Di Dalam Elemen Sebaris dalam HTML5 Sentiasa Diterima Selepas Menggunakan CSS?

Melanggar Peraturan CSS: Elemen Sebaris Mengandungi Elemen Blok

Secara tradisinya, elemen blok bersarang dalam elemen sebaris dianggap sebagai pelanggaran struktur HTML. Walau bagaimanapun, dalam HTML5, amalan ini dibenarkan. Adakah ini bermakna ia boleh diterima untuk menukar elemen blok kepada sebaris walaupun ia menyertakan elemen blok lain?

Pandangan Spesifikasi CSS

Mengikut Spesifikasi CSS 2.1, apabila elemen sebaris mengandungi elemen peringkat blok, elemen sebaris terbahagi kepada dua kotak berasingan, melampirkan elemen blok dan berturut-turut adik beradik peringkat blok. Kotak blok tanpa nama yang terhasil ini menjadi saudara kepada elemen sebaris asal.

Contoh:

Pertimbangkan penanda HTML dan peraturan CSS berikut:

<div><p>This is a paragraph</p></div>

div {
  display: inline;
}

Dalam senario ini, div menjadi sebaris, manakala elemen p kekal pada tahap blok secara lalai. Menurut CSS 2.1, ini mengakibatkan div dipecahkan kepada dua kotak blok tanpa nama di sekeliling elemen p.

Pelaksanaan dan Kesahan Penyemak Imbas

Spesifikasi CSS menyediakan panduan tentang tingkah laku penyemak imbas, tetapi ketekalan pelaksanaan dan tafsiran dalam kalangan pelayar moden mungkin berbeza-beza. Sama ada sarang sedemikian dianggap sah atau tidak selepas menggunakan peraturan CSS bergantung pada penyemak imbas tertentu dan pelaksanaannya.

Kesimpulan

Walaupun HTML5 membenarkan elemen blok bersarang dalam baris sebaris elemen, menukar elemen blok kepada sebaris apabila ia sudah mengandungi elemen blok menunjukkan kawasan kelabu. Tingkah laku ditentukan secara teknikal dalam CSS tetapi tertakluk kepada tafsiran dan pelaksanaan penyemak imbas. Adalah penting untuk mempertimbangkan keserasian penyemak imbas dan gelagat yang dimaksudkan untuk aplikasi web anda sebelum menggunakan amalan ini.

Atas ialah kandungan terperinci Adakah Elemen Blok Bersarang Di Dalam Elemen Sebaris dalam HTML5 Sentiasa Diterima Selepas Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!