Gradient không làm tròn trong IE9

Question

tôi đã tạo ra một nút tròn góc và trong IE9 nền dốc không làm tròn:

Đây là CSS:

.search button { 
    padding: 10px; 
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif; 
    font-size: 16px; 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 

thế nào có thể Tôi sửa lỗi này?

Answer 1

Xóa bộ lọc kiểu từ lớp css của bạn.

JS Fiddle Example

Nếu bạn muốn gradient cho IE8 và dưới đây, thì bạn cần phải tạo một file CSS riêng biệt và bọc nó trong này:

<!--[if lte IE 8]> 
[css path here] 
<![endif]--> 

Bạn không thể có cả một gradient và tròn nút góc trong IE9. Thực tế, khung công tác Bootstrap của Twitter làm giảm các nút IE9 thành màu nền đồng nhất với góc tròn.

Answer 2

IE9 là trình duyệt hoàn hảo; vấn đề đang sử dụng kiểu cũ filter.

Chúng không bao giờ tốt, và chúng chỉ thực sự còn lại trong IE9 vì lý do hỗ trợ kế thừa. Có vô số quirks với họ, bao gồm cả một trong đó là khá nổi tiếng.

Vấn đề của bạn là IE9 không hỗ trợ gradient CSS chuẩn, do đó, câu hỏi là phải làm gì thay vì filter nếu bạn muốn sử dụng chúng?

Có nhiều câu trả lời khác nhau, nhưng câu trả lời hay nhất là CSS3Pie.

Đây là một thư viện javascript nhỏ cho phép bạn sử dụng gradient tiêu chuẩn CSS trong IE9 (và tất cả các phiên bản IE khác từ IE6 trở đi). Nó cũng bổ sung thêm border-radius và box-shadow cho các phiên bản của IE không hỗ trợ chúng.

Không phô trương và không gây thêm bất kỳ chi phí nào trong các trình duyệt khác.

CSS3Pie sử dụng ngôn ngữ đồ họa vector của IE, VML để hiển thị gradient của nó, do đó tại sao nó không bị ảnh hưởng bởi lỗi filter.

Nếu bạn thực sự muốn tránh sử dụng Javascript, bạn có thể tạo phần tử VML hoặc SVG cho chính mình bằng một gradient. Điều này có thể được thực hiện trong CSS của bạn bằng cách sử dụng một hình ảnh được mã hóa URI (ví dụ here). Nhưng dễ dàng hơn nhiều để cho phép CSS3Pie làm điều đó cho bạn.

Chỉ các giải pháp khác mà bạn có sẵn là tải hình nền nền cũ hoặc chỉ cung cấp màu nền cố định làm tùy chọn dự phòng.

Bạn có lẽ nên cung cấp màu đồng bằng dự phòng, nhưng đối với vấn đề này, tiền của tôi là CSS3pie là giải pháp tốt nhất.

Hy vọng điều đó sẽ hữu ích.