Chrome 53 giới thiệu khoảng cách không mong muốn trong các phần tử LI

Question

Khởi động Chrome 53, chúng tôi đã nhận thấy một vấn đề liên quan đến CSS mới.

Sự cố này cũng có thể thấy trong Vivaldi (dựa trên cùng một công cụ như Chrome). Vấn đề tương tự cũng chưa từng thấy trong Safari hay Firefox hoặc Chrome 52.

Ví dụ, ở đây: https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/using-the-mfpf-sdk/

Đây có phải là sự thay đổi một spec mà đòi hỏi cập nhật CSS của chúng tôi hoặc một lỗi thực tế trong render động cơ?

Cập nhật: Có vẻ như đang xảy ra do list-style-position:inside.

<ul style="list-style-position:inside"> 
 
    <li>li element 1</li> 
 
    <li>li element 2</li> 
 
</ul>

Khi sử dụng, ngoài cho các phần tử LI bị đẩy bên trong như mong đợi, khoảng cách giữa các viên đạn và các văn bản tăng là tốt. Loại bỏ quy tắc CSS và khoảng cách giữa dấu đầu dòng và văn bản nhỏ hơn nhiều.

Làm cách nào để chúng tôi có thể giải quyết vấn đề này?

Answer 1

không thể nói nếu đây là một điều không minh bạch hoặc một sự thay đổi spec, nhưng một workaround sẽ được thiết lập danh sách theo phong cách với bên ngoài, và thay vì đệm sử dụng một lề trái:

.tutorial .sidebar .navmenu-default .navmenu-nav.dropdown-menu>li.active>ul>li { 
     list-style-position: outside; 
} 
.tutorial .sidebar ul { 
    margin-left: 10px; 
    padding: 0; 
}