FF与IE
1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中,
IE 不行,IE需要设定body居中,
首先在父级元素定义text-algin: center;
这个的意思就是在父级元素内的内容居中。
2.链接(a标签)的边框与背景
a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位,
若不设 height, 可以在 menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了
解决方法是
改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
<!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
</style>
4. 游标手指cursor
cursor: pointer 可以同时在 IE FF 中显示游标手指状,
hand 仅 IE 可以
5.UL的padding与margin
ul标签在FF中默认是有padding值的,
而在IE中只有margin默认有值,
所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,
因此,如果想显示一致,所以最好在css中指定margin和 padding,
针对上面两个问题,我的css中一般首先都使用这样的样式
ul,form{margin:0;padding:0;}
给定义死了,所以后面就不会为这个头疼了.
7. BOX模型解释不一致问题
在FF和IE 中的BOX模型解释不一致导致相差2px
解决方法:
div{margin:30px!important;margin:28px;}
注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,
但别的浏览器可以识别。
所以在IE下其实解释成这样:
div {maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important;
#box
{
width:600px; //for ie6.0
– width:500px; //for ff+ie6.0}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width /**/:500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,
FF和OPera作用.属性选择器和子选择器还是有区别的,
子选择器的范围从形式来说缩小了,










