零度空间

写页面设计的朋友们，经常为浏览器CSS的兼容性头痛不已，经过本人的仔细研究发现一种好的写法，现在与大家分享.

#body { border:2px solid #00f;     /*ff的属性*/ border:2px solid #090\9;   /* IE6/7/8的属性 */ border:2px solid #F90\0;     /* IE8支持 */ _border:2px solid #f00;     /*IE6的属性*/ }

<div id=”body”> <ul>     <li>FF下蓝边</li>     <li>IE6下红边</li>     <li>IE7下绿边</li>     <li>IE8下黄边</li> </ul> </div>

注:css顺序不能写错，因为Firefox不认识\9,\0,_写法,所以为蓝边;\9是IE6，7，8的属性,下面代码并没有重写IE7的代码，所以IE7下绿边;同理,\0为ie8属性，相当于重写了颜色，所以IE8下为黄边,_是ie6的属性,重写颜色为红边.

在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果，或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。

演示：使用CSS2.1的多背景

演示：使用CSS2.1的多边框

支持的浏览器：Firefox 3.5+, Safari 4+, chrome4+, opera10+, IE8+

是如何实现的呢？

从本质上讲，我们所创建的伪对象（:before和:after）跟我们在对待HTML元素嵌套关系是相同的。但他们相对于嵌套使用的HTML元素而言具有其独特的优势——不具有语义化。

当使用多背景或者多重边框的时候，我们需要将伪元素层的内容利用绝对定位固定在HTML元素内容的后面。

解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家（下面所有例子以父main，子divleft、divright为例）。
1、利用“clear:both”背景填充 这是使用最广泛的一种做法，我一直都用此方法解决div列高度自适问题。三行二列布局，主要内容在右边，网页宽度780px,左列240px,右列540px。

CSS代码：
#main{ width: 780px; margin: 0; background: url(bg.gif) #FFFFFF repeat-y left; text-align: left; } #divleft { float: left; width: 240px; } .clear{ border-top:1px solid transparent !important; margin-top:-1px !important; border-top:0; margin-top:0; clear:both; visibility:hidden; }