CSS Box-Shadow không hoạt động trong IE

Question

Làm cách nào để làm việc này trong IE?

.fancy { 
    border: 1px solid black; 
    margin: 10px; 
    box-shadow: 5px 5px 5px #cccccc; 
    -webkit-box-shadow: 5px 5px 5px #cccccc; 
    -moz-box-shadow: 5px 5px 5px #cccccc; 
} 

Cảm ơn

Answer 1

Từ google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Có lẽ không chính xác như bạn muốn nó, nhưng fiddle xung quanh với nó hay nhìn vào DXImageTransform một số chi tiết.

Answer 2

hộp bóng được hỗ trợ từ IE9 trở đi.

Có rất nhiều trang web mô tả cách thực hiện việc này cho các trình duyệt IE cũ hơn. Một trong số đó là: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Ngoài ra kiểm tra: http://www.css3.info/preview/box-shadow/

My cá nhân dư luận nói chung về việc trình duyệt cũ làm những điều họ thực sự không thể là thế này: Tránh nó. Thay vào đó, hãy áp dụng các nguyên tắc của progressive enhancement. Cũng giải thích cho khách hàng của bạn rằng việc giải quyết các vấn đề của đã lỗi thời, các trình duyệt không chuẩn với giải pháp không chuẩn, rất tốn thời gian và có lẽ không đáng để nỗ lực.

Answer 3

Nó hoạt động tốt trong IE 9.

phiên bản trước không hỗ trợ box-shadow, nhưng bạn có thể sử dụng một bộ lọc:

zoom: 1; 
filter: 
    progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180); 

đọc: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Answer 4

Mở IE bạn cần phải sử dụng lọc cho hiệu ứng đó.

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); 
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; 
zoom: 1; 

Answer 5

Tôi tin rằng vấn đề này là đặc trưng cho trình duyệt của bạn, bởi vì nó làm việc cho tôi trong jsFiddle này trên cả hai IE9 & Chrome. Liên kết bạn cung cấp hoạt động trong Chrome, nhưng không hoạt động trong IE9. Điều này sẽ chỉ ra rằng vấn đề cụ thể đối với việc triển khai của bạn.

Tôi sẽ kiểm tra để đảm bảo rằng chế độ tương thích bị tắt và cũng đảm bảo bạn không bật bất kỳ cài đặt nào có thể ảnh hưởng đến CSS. Tôi cũng sẽ đề nghị kiểm tra điều này trong nhiều trình duyệt và sử dụng quy trình loại bỏ để xác định lý do tại sao nó không hoạt động.

EDIT

Tôi chỉ nhìn vào đánh dấu của bạn. Hãy thử loại bỏ dòng này và xem nếu nó làm cho một sự khác biệt:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Answer 6

Bạn cũng có thể sử dụng http://css3pie.com/

PIE làm cho trình duyệt Internet Explorer 6-9 khả năng render một số các tính năng trang trí CSS3 hữu ích nhất.

Answer 7

Trên trang web của bạn, quy tắc CSS này đang ngăn box-shadow từ làm việc trong IE9:

table, table td { 
    border-collapse: collapse; 
} 

Xem:box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

Bạn phải thêm border-collapse: separate; đến yếu tố mà box-shadow là không làm việc.

Vì vậy, điều này sẽ khắc phục vấn đề cho bạn:

.fancy { 
    border-collapse: separate; 
} 

Answer 8

Theo mặc định IE được thiết lập chế độ Compatibility IE10 cần được thay thế bằng IE 9 sử dụng meta-tag. Vì vậy, bất cứ khi nào nó sẽ được chạy trên các trình duyệt khác thì nó sẽ sử dụng CSS sẽ tương thích với IE9. Như trong IE10 Compatibility sở hữu chế độ hộp bóng CSS đã bị xóa khỏi thư viện

Chúng ta có thể sử dụng thẻ meta trong đầu chỉ để thay đổi mức độ tương thích tài liệu:

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" /> 

Trên thẻ cho thấy rằng làm này tài liệu tương thích với IE8 và IE9 cho các trình duyệt khác với IE8 và IE9 chuyển sang cấp độ CSS cho IE9.