ie6ie7ffcss:CSS完美兼容IE6/IE7/FF的方法来源: 发布时间:星期四, 2009年2月12日 浏览:112次 评论:0
有关CSS对各个浏览器兼容已经是老生常谈 ![]() ![]() ![]() ![]() ![]() 以下两种思路方法几乎能解决现今所有HACK. 1,!important 随着IE7对!important ![]() ![]() <style> #wrapper { width:100px!important;/*IE7+FF*/ width:80px;/*IE6*/ } </style> 2,IE6/IE77对FireFox *+html和*html是IE特有 ![]() <style> #wrapper { #wrapper{width:120px;}/*FireFox*/ *html#wrapper{width:80px;}/*ie6fixed*/ *+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/ } </style> 注意: *+html对IE7 ![]() <!DOCTYPEHTMLPUBLIC\"-//W3C//DTDHTML4.01Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> 2、万能float闭合 有关clearfloat ![]() 将以下代码加入GlobalCSS中,给需要闭合 ![]() ![]() <style> /*ClearFix*/ .clearfix:after { content:\".\"; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /*HidefromIEMac*/ .clearfix{display:block;} /*EndhidefromIEMac*/ /*endofclearfix*/ </style> 3、其他兼容窍门技巧 1,FF下给div设置padding后会导致width和height增加,但IE不会.(可用!important解决) 2,居中问题. 1).垂直居中.将line-height设置为当前div相同 ![]() 2).水平居中.margin:0auto;(当然不是万能) 3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签) 4,FF和IE对BOX理解 ![]() ![]() ![]() 5,ul标签在FF下面默认有list-style和padding.最好事先声明,以避免不必要 ![]() 6,作为外部wrapper ![]() 7,有关手形光标.cursor:po ![]() 1针对firefoxie6ie7 ![]() 现在大部分都是用!important来hack ![]() ![]() 但是ie7对!important可以正确解释 ![]() ![]() 对IE7不错 ![]() ![]() ![]() ![]() ![]() 现在写 ![]() #1{color:#333;}/*Moz*/ *html#1{color:#666;}/*IE6*/ *+html#1{color:#999;}/*IE7*/ 那么在firefox下字体颜色显示为#333 ![]() ![]() ![]() 2css布局中 ![]() 主要 ![]() body{TEXT-ALIGN:center;} #center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;} 介绍说明: 首先在父级元素定义TEXT-ALIGN:center;这个 ![]() ![]() ![]() 但在mozilla中不能居中 ![]() 需要介绍说明 ![]() ![]() ![]() ![]() ![]() ![]() 只要在每个拆出 ![]() ![]() 3盒模型区别解释 #box{width:600px;//forie6.0-w\\idth:500px;//forff+ie6.0} #box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-} 4浮动ie产生 ![]() #box{float:left;width:100px;margin:000100px;//这种情况的下IE会产生200px ![]() 这里细说 ![]() ![]() ![]() ![]() #box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同 ![]() ![]() ![]() IE不认得min-这个定义 ![]() ![]() ![]() ![]() ![]() ![]() 正常 ![]() ![]() ![]() ![]() ![]() 比如要设置背景图片 ![]() ![]() ![]() ![]() #box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;} [Page] 6页面 ![]() min-width是个非常方便 ![]() ![]() ![]() ![]() ![]() ![]() 而它实际上把width当做最小宽度来使 ![]() ![]() ![]() ![]() ![]() ![]() 然后CSS这样设计: #container{min-width:600px;width:expression(document.body.clientWidth<600?\"600px\":\"auto\");} 第 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 7清除浮动 .hackbox{display:table;//将对象作为块元素级 ![]() 或者加入:after(伪对象),设置在对象后发生 ![]() ![]() ![]() ![]() ![]() 所以并不影响到IE/WIN浏览器 ![]() ![]() ![]() 8DIV浮动IE文本产生3象素 ![]() 左边对象浮动 ![]() ![]() ![]() ![]() ![]() #box{float:left;width:800px;}#left{float:left;width:50%;}#right{width:50%;}*html#left{margin-right:-3px;//这句是关键} HTML代码<divid=\"box\"><divid=\"left\"></div><divid=\"right\"></div></div> 9属性选择器(这个不能算是兼容,是隐藏css ![]() ![]() p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下 ![]() 属性选择器和子选择器还是有区别 ![]() ![]() ![]() ![]() ![]() 10IE捉迷藏 ![]() 当div应用复杂 ![]() ![]() ![]() ![]() ![]() 有些内容显示不出来 ![]() ![]() 解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽 ![]() ![]() 11高度不适应 高度不适应是当内层对象 ![]() ![]() margin或paddign时 ![]() 例: <divid=\"box\"> <p>p对象中 ![]() </div> CSS:#box{background-color:#eee;} #boxp{margin-top:20px;margin-bottom:20px;text-align:center;} 解决思路方法:在P对象上下各加2个空 ![]() ![]() 0
相关文章读者评论发表评论 |