Chrome เพิ่มช่องว่างให้กับการนำทางของไซต์ แต่ Safari ไม่เพิ่ม

แต่ละเบราว์เซอร์สามารถเลือกวิธีเรนเดอร์สิ่งต่าง ๆ รวมถึงพื้นที่สีขาว นั่นคือสาเหตุที่เบราว์เซอร์ต่าง ๆ แสดงสิ่งต่าง ๆ กัน

ลองใช้ไฟล์ที่ทำให้เป็นมาตรฐาน เช่น normalize.css เพื่อทำให้เบราว์เซอร์สอดคล้องกันมากขึ้น

ในกรณีของคุณ แท็ก <li> ของคุณมีพื้นที่สีขาวจำนวนมากซึ่ง Safari จะเพิกเฉยและแสดง Chrome หากคุณไม่ต้องการใช้ Normalize.css หรือไม่ช่วยให้คุณมีตัวเลือกเพิ่มเติมอีกสองตัวเลือกสำหรับปัญหาเฉพาะของคุณ

ตัวเลือกที่ 1:

คุณสามารถลบช่องว่างเพื่อให้กลายเป็น <li>Household</li>

ตัวเลือก 2:

หรือคุณสามารถเพิ่มกฎ css เพื่อละเว้นช่องว่างอย่างชัดเจน

กฎ CSS จะเป็น:

li{
    white-space: nowrap;
}