linear-gradient sử dụng CSS3 PIE trong IE9 không hoạt động, IE8 hiện

Question

Tôi đã quyết định bỏ hoàn toàn hỗ trợ cho IE6 và IE7 trong trang web của mình, chuyển hướng người dùng đến trang cảnh báo chỉ có văn bản. Tuy nhiên tôi vẫn hỗ trợ IE8 và IE9.

Tôi đang đạt được điều này bằng cách sử dụng CSS3 PIE và bán kính đường viền hoạt động ở cả hai (IE8/9), hộp bóng hoạt động trong cả hai, tuy nhiên tôi cũng dựa vào tuyến tính-gradient. Tôi có đống thẻ được sử dụng để đạt được điều này:

background: #E6E6E6; /* fallback */ 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */ 
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */ 
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */ 
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */ 
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */ 
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */ 
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */ 
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */ 

behavior: url(/PIE.htc); /* load PIE.htc */ 

linear gradient làm việc trong IE8, nhưng không IE9, kỳ quặc. Tôi đã thử bất kỳ giải pháp nào tôi đã tìm thấy, nhưng chúng chưa hoạt động. IE8 chỉ cho thấy dự phòng: nền: # E6E6E6; - không phải là độ dốc.

Tôi không nghĩ rằng đó là điều gì sai trái với máy chủ hoặc bất cứ điều gì như thế, bởi vì các tài sản khác - border-radius và hộp bóng - làm việc với PIE nhưng không phải không có.

Tôi đã có tất cả các đặc tính làm việc trong tất cả các trình duyệt Tôi ủng hộ - chỉ không IE9 :(

Bất kỳ ý tưởng
Cảm ơn

Answer 1

OK, đây là bản sửa lỗi của tôi. Nó chắc chắn không phải là đẹp, nhưng nó hoạt động.

<style type="text/css"> 
body{ 
    background: #E6E6E6; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); 
    background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -moz-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -ms-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -o-linear-gradient(#E6E6E6, #B3BCC7); 
    background: linear-gradient(#E6E6E6, #B3BCC7); 
    -pie-background: linear-gradient(#E6E6E6, #B3BCC7); 

    behavior: url(/PIE.htc); 
} 
</style> 

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]--> 

EDIT: Nếu ai muốn họ, PIE.htc được tìm thấy ở http://www.css3pie.com và ie9-gradient-fix.htc được tìm thấy ở http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. Tôi không thể có được ie9-gradient-fix.htc để làm việc trừ khi nó nằm trong thư mục gốc, PIE.htc đã làm việc trong thư mục/resources/của tôi.

Answer 2

Tôi không nghĩ rằng đó là điều gì sai trái với máy chủ hoặc bất kỳ thứ gì tương tự, vì các thuộc tính khác - bán kính đường viền và hộp bóng - hoạt động với PIE nhưng không phải là không.

PIE không hiển thị bán kính đường viền và hộp bóng trong IE9 vì IE9 sup cổng cả hai trong số những người tự nhiên. Sự hiện diện của họ không phải là dấu hiệu cho thấy PIE đang hoạt động.

Đoán của tôi thực sự là PIE.htc của bạn đang được cung cấp với tiêu đề loại nội dung không chính xác - IE9 đặc biệt nghiêm ngặt về loại nội dung. Xem http://css3pie.com/documentation/known-issues/#content-type để biết chi tiết.

Answer 3

Tuyệt vời! tôi đã sử dụng PIE.php và sửa lỗi này (linear-gradient + border-radius) trong IE8, IE9!

Để sử dụng nó, chỉ cần chắc chắn rằng cả hai PIE.php và PIE.htc đang ở trong cùng một thư mục, và sau đó tại điểm CSS hành vi vào file PHP thay vì:

hành vi: url (PIE .php);

Answer 4

ie9-gradient-fix.htc đã hoạt động đối với tôi trong I.E. 9 nhưng sau đó một lần nữa thay đổi hành vi từ pie.htc sang pie.php CSONG cũng làm như vậy.

Các bánh xe quay oh chậm ở Microsoft nhưng có vẻ như chúng cũng có thể quay ngược chiều nhau?

Answer 5

Tôi đã có một nhức đầu lớn bởi vì ngay cả với tiêu đề loại nội dung chính xác (văn bản/x-thành phần), gradient tuyến tính không hoạt động trên IE9.

Nâng cấp lên PIE 2.0 đã giải quyết được sự cố.

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

Answer 6

Trong trường hợp của tôi, tôi đã sử dụng <!--[if lt IE 9]>, thay đổi nó để <!--[if lt IE 10]> cố định vấn đề của tôi (không actualy bao gồm tập tin css IE của tôi).

Tôi nghĩ rằng ** <!--[if lte IE 9]> sẽ thực hiện cùng một logic.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0); 

PS. Tôi không sử dụng css3pie gì cả (tôi nghĩ mình là, derp)