0 Comments

FireFox和IE中CSS兼容技巧汇总(2)

发布于:2013-07-18  |   作者:广州网站建设  |   已聚集:人围观

7清除浮动

.hackbox{display:table;//将对象作为块元素级的表格显示}或者.hackbox{clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非IE浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

8DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. 


  1. #box{float:left;width:800px;}  
  2. #left{float:left;width:50%;}  
  3. #right{width:50%;}*html  
  4. #left{margin-right:-3px;//这句是关键}  
  5. HTML代码<dividdivid="box"><dividdivid="left">div><dividdivid="right"> 
  6. div>div> 
  7.  

9属性选择器(这个不能算是兼容,是隐藏CSS的一个bug

p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
广州网站建设,网站建设,广州网页设计,广州网站设计

11高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用 margin或paddign时。 例: 


  1. <dividdivid="box"> 
  2. <p>p对象中的内容p> 
  3. div> 
  4.  

CSS


  1. #box{background-color:#eee;}  
  2. #boxp{margin-top:20px;margin-bottom:20px;  
  3. text-align:center;}  
  4.  
  5.  

解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

标签:
飞机