而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

看Demo

原理

这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法

1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
<!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->

比如 #tab{float:left;margin-left:20px;...}，在ie6下会出现外边距为40px。

此时添加内联语句 display:inline;，可以消除ie6下双倍边距效果。

其他浏览器下依旧正常。

查看css，使用border-width=0，依然存在问题。修改多次，还是不能解决。

使用FF的Debug插件，发现其html编码多了一个属性：rule="all"，意思是现实行和列之间的线条。然而datagrid里面却没有这个属性。查资料发现，对应的属性为GridLines，如不填写，默认为GridLines="both"，即全现实。修改为GridLines="none"，问题解决！

做页面设计，需要配合ie6 7 8 FF 和Chrome 几个浏览器测试，问题总是很多，要细心，善于发现，冷静思考！

经过排查终于发现，CSS文件中有中文注释出现乱码，导致后面CSS丢失。

换成英文之后，一切显示正常了。

总结：就是中文字体，也要换成相应的英文。比如“宋体”改为“simsun”。

　　返回包含一个日期的 Variant (Date)，这一日期还加上了一段时间间隔。

　　语法

　　DateAdd(interval, number, date)

　　DateAdd 函数语法中有下列命名参数：

　　部分 描述

　　interval 必要。字符串表达式，是所要加上去的时间间隔。

　　number 必要。数值表达式，是要加上的时间间隔的数目。其数值可以为正数（得到未来的日期），也可以为负数（得到过去的日期）。

　　date 必要。Variant (Date) 或表示日期的文字，这一日期还加上了时间间隔。

      可以计算当前系统日期的前后多少天。例如 DateAdd(d,-3,getdate())即为当前系统日期的前3天。

<li><span>2010.11.01</span><a href="#" target="_blank" title="">新闻列表文章测试标题新闻列表文章测试标题新闻列表文章测试标题</a></li>

css代码

li{ width: 460px; height: 23px; line-height:23px; margin:0; padding:0;}
li span{ float:right; width: 70px; height: 23px; margin: 0 10px 0 0; padding:0;  text-indent:0; color:#666666;}
li a{ height: 23px; line-height:23px; margin: 0 0 10px 0; padding:0; color:#666666; text-decoration:none; /*标题长度截断*/ display:block; width:350px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /*标题长度截断*/ }
li a:hover{ color:#86b427; text-decoration:underline;}

总结：span属性在浮动之后变为块元素，会自动换行，因此需要放在前面，然后浮动到右边。标题长度截断代码可以用来使超过设定宽度的标题自动截取后省略号显示。里面的几行代码同时才能实现该效果（FF只截断不显示...）。

例如：新闻列表文章测试标题新闻列表文章测试标题新闻列表文...

.clear { clear: both; }

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

　　那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：

.home{
    margin-left:20px!important;
    margin-left:40px;
}

　　那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。