Mengapa Elemen Bersebelahan Beralih Apabila Melayang Di Atas Sempadan CSS?

Anomali Sempadan Tuding dalam CSS

Apabila menggunakan acara tuding pada elemen dengan sempadan, isu biasa timbul apabila unsur-unsur bersebelahan dengan unsur yang dilegar itu beralih kedudukan. Ini kerana jidar menambah lebar elemen, menyebabkan blok yang mengandungi melaraskan reka letaknya.

Dalam senario ini, senarai sauh tidak tertib yang dihiasi dengan sempadan :hover menunjukkan masalah ini. Apabila tuding, sauh ke kiri beralih secara halus disebabkan jidar 1px yang ditambah.

Penyelesaian: Mengekalkan Kedudukan Elemen Semasa Tuding

Untuk mengelakkan anomali kedudukan ini, anda boleh gunakan teknik berikut:

Tambah jidar lutsinar pada keadaan bukan tuding unsur. Ini memastikan ruang yang dikhaskan untuk sempadan sudah diambil kira, menghalang reka letak daripada melaraskan apabila sempadan tuding muncul.

Contoh Kod:

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

Oleh menggabungkan sempadan lutsinar ini, anda secara berkesan menghapuskan "melompat" yang disebabkan oleh kemunculan sempadan tuding, memastikan kedudukan persekitaran yang stabil elemen.

Atas ialah kandungan terperinci Mengapa Elemen Bersebelahan Beralih Apabila Melayang Di Atas Sempadan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!