Bài viết này mình giới thiệu với các bạn 1 công cụ rất tốt để khắc phục đó là DD_belatedPNG. Với các công cụ khác có các nhược điểm như ảnh background PNG cho thẻ div không repeat được khi thẻ div có kích thước không cố định và luôn thay đổi. DD_belatedPND đã khắc phục được điều đó.
Cách 1:
Tất cả bạn cần làm chỉ là thêm đoạn sau :
và xử lý phần nào bạn muốn, như:
1 lớp:
$(document).ready(function()
{
//$('.search-content').corner();
DD_belatedPNG.fix('.titlemain');
}
hay nhiều lớp:
$(document).ready(function()
{
//$('.search-content').corner();
DD_belatedPNG.fix('.titlemain,.right');
}
hay các thẻ
$(document).ready(function()
{
//$('.search-content').corner();
DD_belatedPNG.fix('.titlemain,.right,div,img');
}
Bạn có thể download DD_belatedPNG tại đây
Cách 2:
Đơn giản hơn cách 1 rất nhiều và hiệu quả chẳng kém gì
Bạn tạo một file: VD fix_png_ie.css
file css đó chứa nội dung sau
* html img, * html .png {
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true) );
}
rồi trên index.html hay file hiển thị của bạn cho đoạn này vào giữa <head> và </head>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/Đường dẫn đến file css (fix_png_ie.css)" />
<![endif]-->
Vậy là xong, bạn đã fix được lỗi png trên IE. (Thủ thuật CSS)
Không có nhận xét nào:
Đăng nhận xét