CSS学习进阶:关于浏览器兼容设计的几点基础知识

CSS学习进阶:关于浏览器兼容设计的几点基础知识

!important的技巧:
提升优先级,IE6不识别,于是可以用此设计解决IE6的一些讨厌的bug。

IE6中float浮动元素导致margin双倍边距的BUG:(浮动元素设置属性display:inline;)
先看css代码:
#1 div{
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}
这样设置左边距设置为10px,但IE6.0解释为20px,解决办法就是是加上 display:inline
代码
#2 div{
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid red
}

firefox中浮动元素父元素高度丢失为零问题解决方法:
方法一:就是在外面再加一层div,在外面的div中设置宽度、居中,在里面的div中设置边框,同时也设置浮动

content 1
content 2

方法二:在最后一个子元素后增加一个div,用来清理浮动float

content 1
content 2

方法三:使用after伪类,作用等同于方法二
#father:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

content 1
content 2

总结:在标准浏览器中,浮动元素脱离了文档流,即当一个元素设置了浮动属性float之后,它就不再按照文档的元素顺序进行布局了,这时候可以考虑再增加一层,或者用clear清理浮动

UL标签的padding与margin默认值
ul标签在FF中默认只有padding值(即:padding-left:40px),而在IE中只默认有margin值(即:margin-left:40px),所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。
一般都在总样式规定一下:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}

点赞 (0)
  1. 曾德府说道:

    过来点广告~嘿嘿
    [reply=任侠,2010-05-02 07:44 PM]是嘛?看来俺得回敬咯~哈哈[/reply]

  2. keelii说道:

    其实IE的一些BUG都是潜在的,最好的避免方法是写出合理的Xhtml!
    [reply=任侠,2010-04-20 10:23 AM]这两天没事在看书,开始系统的学习一下,记着这些来加深印象的,多谢你的建议,呵呵[/reply]

  3. johnpc说道:

    不错的文章,学习了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据