sử dụng chiều rộng ban đầu cho phần tử không hoạt động trong IE

107

Tôi có một plugin đồ thị chèn canvas và chú giải <table>vào vùng chứa của nó. Trong plugin tablenày, không có widthđịnh nghĩa và trong CSS của tôi có chiều rộng cho các bảng bên trong vùng chứa đó đã được chèn plugin của tôi.

Vì vậy, div mới đang kế thừa table{ width: 100%}từ CSS và hiển thị sai.

Tôi đã cố gắng sử dụng width: initial;, có vẻ tốt trên Chrome nhưng IE không thích nó, ^{hãy kiểm tra tính tương thích của trình duyệt}

Tôi thừa nhận việc thay đổi / buộc CSS nội tuyến trong script / plugin vì nó phải hoạt động trong bất kỳ môi trường nào.

Giải pháp tốt nhất ở đây là gì?

— Rikard
nguồn

Bạn đã thử đặt chiều rộng tối thiểu chưa? Nó có hoạt động không?

— BuddhistBeast

@BuddhistBeast, không nghĩ về điều đó! Nhưng đã thử điều đó ngay bây giờ và cũng không hoạt động trên Chrome.

— Rikard

Câu trả lời:

177

Giống như bạn đã nói, nói chung width: autosẽ có tác dụng tương tự. Có các quy tắc:

.my-selector {
    width: auto;
    width: initial;
}

Nên làm cho nó sử dụng initialnếu nó được hỗ trợ và autonếu không.

— Mark Rhodes
nguồn

Điều này đã khắc phục sự cố của tôi. Cảm ơn.

— dchayka

Chỉ cần tiết kiệm cho tôi một giờ. Cảm ơn.

— Skitterm

Như một lưu ý, initial là một giá trị thuộc tính hợp lệ ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Nhưng (nếu bạn cuộn xuống "Khả năng tương thích của trình duyệt" trong liên kết trước đó), không có phiên bản IE nào hỗ trợ nó.

— gtramontina

điều này được gọi là dự phòng và là một mẫu mã rất phổ biến trong CSS. ngoài ra, việc sử dụng width: autosẽ không chỉ có tác dụng tương tự mà còn có tác dụng tương tự chính xác , vì autođược xác định là giá trị ban đầu cho thuộc widthtính.

— chharvey

Sử dụng width: auto;nội tuyến, bên trong tập lệnh giải quyết vấn đề trên Chrome, FIrefox và IE 11. Chỉ không chắc liệu có cách nào tốt hơn không.

— Rikard
nguồn