解决IE6下PNG图片不透明的方法二

<script language="javascript" type="text/javascript">
 function setPng(img, w, h) {
  ua = window.navigator.userAgent.toLowerCase();
  if(!/msie/.test(ua))
   return;
  imgStyle = "display:inline-block;" + img.style.cssText;
  strNewHTML = "<span style=\"width:" + w + "px; height:" + h + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" + img.src + "’, sizingMethod=’scale’);\"></span>";
  img.outerHTML = strNewHTML;
 }
 </script>

  <div class="float_l" style="width:18px;height:18px;margin:11px 4px 0 2px;">
  <a href="upload/200906251215516101.png" border="0" onload="setPng(this, 18, 18);" /></a>
 </div>

对IE6、IE7、FF兼容性的详细CSS HACK介绍

现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。我真希望那个IE6快点退休……

css Hacks,css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:www.webdevout.net,这个CSS补丁(hacks)很简单,在样式表中单独为ie7设置某个元素,id或者class前面这样写:

*:first-child+html #ID{}

或者

*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:

>body
html*
*+html

这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 > 选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式:

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.

新建一个css样式如下:
插入代码:

#item {
width: 200px;
height: 200px;
background: red;
}

新建一个div,并使用前面定义的css的样式:
插入代码:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:
插入代码:

<body lang="en">

现在对div元素再定义一个样式:
插入代码:
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:
插入代码:

#item:empty {
background: green !important
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试:

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7

Screenshot of the IE7 css hack in Firefox 1.5

按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
 

解决IE6下PNG图片不透明的问题

IE6真是个烂浏览器,CSS方面已经一堆bug了,连这么优秀的png图片也不兼容,无法透明,透明部分会显示成灰色,倒。
有人会选择换成gif格式,但gif格式虽然可以做到透明,但会有毛边,很不美观,不爽。
在网上找到了几个方法,觉得这个方法最简单,才子修改了一下函数,直接针对IE6有效,其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码:
 

function enablePngImages() {
   var imgArr = document.getElementsByTagName("IMG");
   for(i=0; i<imgArr.length; i++){
     if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
       imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
       imgArr[i].src = "images/none.gif";
     }

     if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
       var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
       imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
       imgArr[i].style.backgroundImage = "url(images/none.gif)";
     }
   }
}

原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断,如下:
 

<!--[if lt IE 7]>
<script type='text/javascript'>
enablePngImages();
</script>
<![endif]-->

才子觉得这样调用不太方便,改了一下函数,添加了判断IE浏览器版本的代码,调用更方便。看代码:
 

function enablePngImages() {
   var imgArr = document.getElementsByTagName("IMG");
   var version = parseFloat(navigator.appVersion.split("MSIE")[1]);

   if (version = 6.0 && (document.body.filters)) {
     for(var i=0, j=imgArr.length; i<j; i++){
       if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
         imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
         imgArr[i].src = "images/none.gif";
       }

       if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
         var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
         imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
         imgArr[i].style.backgroundImage = "url(images/none.gif)";
       }
     }
   }
}

加了判断IE版本的代码,如果为IE6就执行。
调用如下:
 

window.onload = function() {
   enablePngImages();
}

为什么要用window.onload呢?这是表示加载完页面内容再执行指定的函数,保证png图片加载完成了再执行。

做了个演示页面:http://www.54caizi.org/demo/enablePngImages.html

iframe自适应高度只需一个方法轻松实现 兼容IE6、IE7、fireFox

iframe自适应高度的轻松实现(只需一个方法) 兼容IE6、IE7、fireFox

iframeAutoHeight.html
=============================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframeAutoHeight</title>
<script type="text/javascript">  
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;  
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}  
}  
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
    <tr>
      <td height="200" align="center">parent table</td>
    </tr>
</table>
<iframe id="ifrID" frameBorder=0 scrolling=no src="iframe.html" width="100%" onload="iframeAutoHeight(this)"></iframe>
</body>
</html>

===========================================
嵌入的iframe.html
===========================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframe</title>
</head>
<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
</body>
</html>
====================================
说明:
iframe 需要定义id 加入onload="iframeAutoHeight(this)"
页面中需要包含方法
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;  
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}