quy tắc CSS cho trình duyệt webkit dựa

Question

Tôi có đoạn code sau CSS:

#mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
} 

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

Bây giờ tôi muốn thực hiện đầu tiên chỉ trong Google Chrome và Safari, và lần thứ hai trong các trình duyệt khác.

tôi đã cố gắng này, nhưng mã thứ hai dường như được thực hiện luôn:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
    } 
} 

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

Làm thế nào tôi có thể khắc phục điều đó?

Answer 1

Vấn đề là bạn đang ghi đè kiểu dáng webkit của mình bằng kiểu dáng không phải webkit. Đảo ngược thứ tự nên sửa lỗi này:

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
    } 
} 

Bạn cũng có thể muốn kiểm tra xem -webkit-min-device-pixel-ratio cháy của bạn trên tất cả các thiết bị webkit-sử dụng, nhưng nó có thể làm.

Để tham khảo, Bảng định kiểu xếp tầng được đọc từ trên xuống dưới. Từ khóa là Cascading. Nếu một quy tắc CSS được đưa ra trước quy tắc CSS giống hệt nhau, quy tắc thứ hai sẽ được ưu tiên. Trong ví dụ của bạn, bạn đã tạo kiểu dáng riêng cho các trình duyệt webkit nhưng sau đó ghi đè nó bằng các quy tắc tạo kiểu chung. Đảo ngược thứ tự có nghĩa là kiểu dáng webkit ở đây sẽ ghi đè kiểu dáng chung (không ảnh hưởng đến các trình duyệt không phải của webkit).