div.content{
width:300px!important;//这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px;//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body.content{//html>body是CSS2的写法
width:300px;//支持CSS2该写法的浏览器有幸读到了这一句
}
列等高技巧
n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,做法有:背景图填充、加JS脚本的
方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
背景图填充法:
xhtml:
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{width:776px;background:url(bg.gif)repeat-y300px;}
#column1{float:left;width:300px;}
#column2{float:right;width:476px;}
.clear{clear:both;}
就是将一个npx宽的一张图片在外部容器纵向重复,定位到两列交错的位置纵向重复,在视觉上产生了两列高度一样的错觉。