Khi làm web chắc các bạn không ít lần đau đầu với ie6 khi mà nó không hỗ trợ tốt cho ảnh PNG. Trong khi đó ảnh PNG lại là 1 phần không thể thiếu khi thiết kế web.
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 đâyCá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)
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn