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.

Trong 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 <!--[if ie]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> » 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 <script type="text/javascript" src="dd_roundies.js"></script> <script type="text/javascript">   dd_roundies.addrule('.roundify', '10px'); </script> » 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-width: 13em;     -webkit-column-width: 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({ width: 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 <script type="text/javascript" src="domassistantcompressed-2.7.4.js"></script> <script type="text/javascript" src="ie-css3.js"></script> » 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 <!--[if ie]> <style type="text/css"> .color-block {     background:transparent;     filter:progid:dximagetransform.microsoft.gradient( startcolorstr=#99000050,endcolorstr=#99000050);     zoom: 1; } </style> <![endif]--> » 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; }

Thêm vào trang Google +