CSS重要一课:IE和FF的区别

  • 当子元素的宽度大于父元素的宽度时,在IE6中,父元素将被撑大,在IE7,8以及FF中,父元素大小不变,子元素超出父元素的包围;
  • IE 6,7和IE 8默认的margin值不一样;
  • FF下给DIV设置padding后会增加width 和 height,但是IE不会,可以使用!important方法搞定(这条错误,经验证,IE也会增加width和height,测试版本包括IE 6,7,8);在IE6以前的本版里面不会增加;解决方案使用box模型,<div id=”box” style”width:150px;”><div style=”padding:25px;”></div></div>;这个方法可以使所有浏览器均为150px;
  • 若要给a设置样式,需要添加display:block属性;
  • ul在各种浏览器下均有默认的padding和list-style,不同的是对齐标准,在IE6和IE7下将list-style也算在内,如图 ,在IE8和FF下,list-style是不算在内的,如图 ,这两张图均为在padding值为0时结果,若要得到同样的结果,必须使用hack。
  • 区别IE6,7,和FF的一个方法比较好的方法,例如:

<style>

#inner {background:#f00;}/*ff和IE8*/

*html  #inner {background:#ff0;}/*IE6*/

*+html  #inner {background:blue}/*IE7*/

</style>

该方法定义的样式,在FF和IE 8下,效果为红色,在IE 6下效果为黄色,在IE 7下效果为蓝色。

  • 居中问题:① 水平居中:对div或者body设置margin:auto属性即可;

② 垂直居中:

  • 页面的最小宽度:min-width用来指定某一元素不能小于某个宽度,但是IE不认得这个标志,解决方案:#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );},使用JavaScript来动态的调整宽度。
  • IE6,7中的div在没用内容的情况下也正常显示,IE8和FF 下,没有内容的div不显示,也不占空间;
  • 10.属性选择器:格式为标签[属性名称],例如p[id] 在p标签下所有具有id属性的都将显示p[id] 的样式;
  • 区别IE 7 和 IE 8的方法是在head区域加入<metahttp-equiv=”X-UA-Compatible”content=”IE=7″>这段代码,IE8最新csshack:”\9″ 例:”margin:0pxauto\9;”.这里的”\9″可以区别所有IE和FireFox.”*” IE6、IE7可以识别.IE8、FireFox不能.”_” IE6可以识别”_”,IE7、IE8、FireFox不能.
  • 解决IE各版本的兼容问题;<scriptsrcscriptsrc=”http://ie7-js.googlecode.com/ svn/version/2.0(beta3)/IE7.js”type=”text/javascript”></< span>script>

 

原文链接:,转发请注明来源!

发表评论