浏览器兼容性问题
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; //这句是关键}