02/10/2018, 18:08

Cách xử lý với các vấn đề CSS3, HTML5 của IE

IE là trình duyệt gặp nhiều rắc rối nhất trong vấn đề thiết kế web, vì nó không hỗ trợ đầy đủ các thuộc tính CSS3, HTML5 (chưa kể các bug khác). Bài viết này được CatsWhoCode viết, tổng kết 10 cách làm cho IE hoạt động giống các trình duyệt khác. rong các cách làm ...

IE là trình duyệt gặp nhiều rắc rối nhất trong vấn đề thiết kế web, vì nó không hỗ trợ đầy đủ các thuộc tính CSS3, HTML5 (chưa kể các bug khác). Bài viết này được CatsWhoCode viết, tổng kết 10 cách làm cho IE hoạt động giống các trình duyệt khác.

rong các cách làm này, nổi rõ lên 2 phương pháp: 1 là dùng các filter được hỗ trợ bởi IE, 2 là dùng các thư viện javascript bổ sung. Cách thứ nhất tuy tiện dụng vì không cần phải load thêm script, nhưng có điểm bất lợi là không tuân thủ đúng chuẩn HTML (hay XHTML), đồng thời cũng vi phạm quy tắc về performance được Yahoo nói đến (cách dùng các filter sẽ liên quan tới việc thêm các biểu thức tính toán vào trong CSS vốn được khuyên không nên dùng). Cách thứ 2 thì tốt hơn và đảm bảo chuẩn hơn, chỉ có điều là phải load thêm script.

Nếu muốn làm 1 site "chất lượng cao", chúng ta nên chọn phương pháp thứ 2. Còn muốn "nhanh, gọn, nhẹ" thì phương pháp 1 là đơn giản nhất.

Lưu ý
Ở đây chỉ nói đến CSS3 và HTML5, những tính năng mới được thêm vào. Không xét đến các bug mà khi thiết kế gặp phải với IE, tuy vậy, phần lớn chúng cũng được khắc phục theo 2 phương pháp nói trên.

Hỗn tạp Blog xin trích lại bài viết để tham khảo sau này:

Enable HTML5 on IE

CODE

» Source : http://remysharp.com/2009/01/07/html5-enabling-script/

Use the text-shadow CSS property on IE

CODE

p.shadowed { 
  text-shadow: #0000ff 0px 0px 3px; /* modern browsers */ 
  filter: glow(color=#0000ff,strength=3); /* ie */ 
}

» Source : http://www.howtocreate.co.uk/textshadow.html

CSS box-shadow on IE

CODE

.shadowed {
    filter:
        progid:dximagetransform.microsoft.dropshadow(color=#969696, offx=1, offy=1)
        progid:dximagetransform.microsoft.dropshadow(color=#c2c2c2, offx=1, offy=1)
        progid:dximagetransform.microsoft.dropshadow(color=#efefef, offx=1, offy=1);
}

» Source : http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html

Rounded corners!

CODE

// dd_roundies.addrule('.roundify', '10px');
// ]]>

» Source : http://www.dillerdesign.com/experiment/DD_roundies/

Multi column layouts

CSS3 allows you to automatically display some content in columns. This is a great thing as it give designers a lot more possibilities to create awesome layouts.
The following CSS will work on Firefox and Safari. It will automatically add columns to a div element.

CODE

.column { 
    -moz-column-awidth: 13em; 
    -webkit-column-awidth: 13em; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
}

Unfortunately, there’s no way to do something similar on Internet Explorer. But jQuery and its columnize plugin are here to help! The following example shows how easy it is to create columns using jQuery and columnize:

CODE

$('#mydiv').columnize();
$('#myotherdiv').columnize({ awidth: 200 });
$('#mythirddiv').columnize({ columns: 2 });

» Source : http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/

CSS3 pseudo-selector emulation

CODE

» Source : http://www.keithclark.co.uk/labs/ie-css3/

Opacity

CODE

.element{
opacity:.7; /* standard css */
filter:alpha(opacity=70); /* ie patch */
}

Rotating HTML elements

Rotating elements is possible with CSS3, using the transform property.

CODE

transform: rotate(240deg); 
-webkit-transform: rotate(240deg); 
-moz-transform: rotate(240deg);

Internet Explorer will simply ignore all of the 3 declarations above. But hey, IE users got filter, don’t they? Sure, this property isn’t W3C valid, but since it’s Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:

CODE

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

» Source : http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

RGBa support

CODE

» Source : http://css-tricks.com/rgba-browser-support/

IE compliant font embedding

CODE

@font-face { 
    font-family: " your fontname "; 
        src: url( /location/of/font/fontfilename.eot ); /* ie */ 
        src: local(" real fontname "), url( /location/of/font/fontfilename.ttf ) format("truetype"); /* non-ie */ 
    }   

/* then use like you would any other font */ 
.element { 
    font-family:" your fontname ", verdana, helvetica, sans-serif; 
}

Nguồn thienduongweb.com

Bình luận

Bình luận về bài viết này

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Cách xử lý với các vấn đề CSS3, HTML5 của IE

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI