Đang tải dữ liệu...
Thiên đường website
Liên hệ
Chính sách
Khách hàng
Giới thiệu
Trang chủ
 
Dịch vụ
  • Thiết kế website
  • Hosting
  • Thiết kế đồ họa
  • SEO tăng thứ hạng
  • Nâng cấp website
  • Dịch vụ nhập liệu
  • Website cho điện thoại
  • Tích hợp thanh toán trực tuyến
  • Dịch vụ google cloud, ec2 cloud
  • SEO tools
  • Đọc tin Rss
Kiến thức cho bạn
  • Trao đổi - học tập
    • Jquery (2)
    • NoSQL (4)
    • NodeJs (1)
    • Lập trình iOS (3)
    • Thủ thuật - kinh nghiệm (33)
    • Lập trình website (63)
    • Tối ưu hóa (11)
    • Mã nguồn (20)
    • SEO (35)
    • Bảo mật (9)
    • htaccess (5)
    • Ebook - tài liệu (4)
    • WYSIWYG (3)
    • Phần mềm (11)
    • Photoshop (5)
  • Thư giản - giải trí
    • Sáng tạo (5)
    • Địa điểm vui chơi (5)
    • Quà tặng (2)
    • Truyện -hình vui (9)
    • Video clip (9)
    • Game (3)
Hỗ trợ trực tuyến
Kỹ thuật : 098 7277 329
vfa.hoangnn - Mr. Hoàng
Tư vấn : 090 282 4547
vfa.hoangnn - Mr. Hoàng
Đối tác
New day TravalReview CompanyMua sắm cả ngày


Mỹ phẩm The Face Shop
Mã giảm giá - Code khuyến mãi
Ốp lưng, Bao da Đẹp
Giá vàng, giá USD
Ốp lưng tự thiết kế
Tagged
CSS3 , HTML5
Apr
09

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

16:01 pm GMT +7 Hanoi |
Trang chủ ›
Trao đổi - học tập ›
Thủ thuật - kinh nghiệm

Thêm vào trang Google +

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 +
Số lần xem : 18223
Đánh giá
Facebook

Bài viết liên quan
  • 22/04/2015 16:42 Hướng dẫn đăng ký VPS Google Cloud Platform
  • 13/10/2014 10:15 Cách ghim nhiều bài viết trên group/nhóm của facebook
  • 16/08/2014 16:15 Khắc phục tình trạng like Fanpage, Group trên Facebook
  • 13/08/2014 12:20 5 lưu ý để không bị khóa tài khoản Facebook
  • 09/08/2014 23:04 Cách đăng ký developer facebook để tạo App Facebook
Bài viết mới hơn

<< Trang trước


Thienduongweb.com - Thiết kế website, tạo gian hàng miễn phí
Địa chỉ trụ sở chính: 241/45 Tân Hòa Đông, F14, Quận 6, TP.HCM
Email: info@thienduong.com
Điện thoại: 098 7277329