浏览器兼容性问题

FF和IEBOX模型解释不一致导致相差2px 
box.style{width:100;border 1px;} 
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102 //加上边框2px 

解决方法：
div{margin:30px!important;margin:28px;} 

注意这两个margin的顺序一定不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。
所以在IE下其实解释成这样：
div{maring:30px;margin:28px} 

　css中的width和padding

　在IE7和FF中width宽度不包括padding，在Ie6中包括padding

　ul和ol列表缩进问题

　消除ul、ol等列表的缩进时，样式应写成：

　　list-style:none;

　　margin:0px;

　　padding:0px;

　在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；

　在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。

  const问题

　Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量. 

     window.location.href问题

 

　IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

　Firefox1.5.x下,只能使用window.location. 

　FF下文本无法撑开容器的高度

 

　标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？

　办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: 

 

　　height:auto!important; 

　　height:200px; 

　　min-height:200px; 

 

　div的垂直居中问题

　

　vertical-align:middle; 将行距增加到和整个DIV一样高 

　line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　

　DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.     

#box{ float:left; width:800px; border:1px solid #E00;}

#left{ float:left; width:50%;border:1px solid #E00;} 

#right{ width:50%;border:1px solid #E00;}    

*html #left{ margin-right:-3px; //这句是关键}

 

转载于:https://www.cnblogs.com/MemoryofHeart/archive/2013/05/03/3058424.html