css常见兼容浏览器问题及其他复杂问题

1、DIV元素必须闭合
IE在解析<div/>时，认为是不闭合元素。所以在html页面中不要写<div/>这样的元素，而应该写<div></div>.
2、关于空的占位符问题。
Ie在解析div时,如果该DIV只是空的占位符,且高度小于12px时,ie解析错位,它默认认为是12px,解决方法是加入lineheight属性高度等于height,同时font-size:0px;这样在ie下才不会解析错位.

 

.i-div{ height:6px;width:20px;}

要在ie下兼容，应该为

.i-div{height:6px;line-height:6px;font-size:0px}

3、float和margin应用问题
float和margin同时应用时，ie会解析2倍的margin导致错位，解决方法是在父容器通过padding解决。但padding的解析也存在问题，这就是第四个问题。
4、ie和firefox解析padding问题的区别及兼容
ie在解析padding的时候认为padding是在宽度里面缩进，而firefox则认为是在宽度外边缩进，所以下面是两个等价的css设置。
ie下的

.i-div{width:800px;padding-left:12px;padding-right:12px;height:500px}

等同于火狐下的：

 

.i-div{width:776px;padding-left:12px;padding-right:12px;height:500px}

为了兼容两个浏览器，可采用如下方法：

.i-div{width:776px!important;width:800px;padding-left:12px;padding-right:12px;height:500px}

注意：前边是火狐，后边是ie，顺序不能颠倒。
5、子div相对父div移位问题解决：
父窗体设置positon属性为absolute，子窗体设置positon属性为relative，同时设置top或bottom或left或right等偏移的像素即可。

6、图片和字体对齐