Cách áp dụng dốc tuyến tính cho IE8

Question

Độ dốc tuyến tính hoạt động tốt cho tất cả các trình duyệt ngoại trừ IE8.
Tôi đã thêm progid:DXImageTransform.Microsoft.gradient ... điều này đã cung cấp cho nó một số gradient tuy nhiên kết quả mong đợi là khác nhau.
Code: -

div{ 
height:500px;width:500px; 
background-size: 50px 50px; 
background-color: #DDEEEE; 
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#DDEEEE',GradientType=0);}  

Làm thế nào để làm cho Linear Gradient này?

Answer 1

Css tôi sử dụng để tạo ra một dốc tuyến tính như sau. Hoạt động tốt trong IE8 quá. Dường như sự khác biệt duy nhất của bạn là tôi đặt một gradientType thành 1 (ngang), không phải 0 (dọc) và tôi sử dụng các màu riêng biệt.

html

<div></div> 

css

div{width:400px;height:200px; 
    /*gradient background color */ 
    background: #0071a0; /* Old browsers */ 
    background: -moz-linear-gradient(left, #0071a0 1%, #ff0000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#0071a0), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #0071a0 1%,#00a3ca 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #0071a0 1%,#ff0000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #0071a0 1%,#ff0000 100%); /* IE10+ */ 
    background: linear-gradient(to right, #0071a0 1%,#ff0000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0071a0', endColorstr='#ff0000',GradientType=1); /* IE6-9 */ 
    } 

http://jsfiddle.net/yAxbJ/

Vấn đề khác là bạn đang sử dụng gần màu trắng, vì vậy hiệu ứng gradient isnt rằng đáng chú ý. Hãy thử đổi sang màu bắt đầu riêng biệt hơn như # ff000 để xem liệu độ dốc có thực sự hoạt động trước không. Ngoài ra, bạn có một giá trị màu nền trùng lặp.