DIV+CSS兼容性问题总结

1.先谨记以下规则,但不推荐使用hack.

所有浏览器通用(市面上主要用到的IE6IE7FF)  height:100px;


IE6专用   _height:100px;


IE6专用   *height:100px;


IE7专用   *+height:100px;


IE7、FF共用   height:100px!important;

 

2.CSS兼容
以下两种方法几乎能解决现今所有兼容.

(1)!important(不是很推荐,用下面的一种感觉最安全)
随着IE7对!important的支持,!important方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
  代码:
  <style>
  #wrapper{
  width:100px!important; /*IE7+FF*/  火狐 IE7浏览时是宽100px;
  width:80px; /*IE6*/   IE6浏览时是宽80px;
  }
  </style>

 

(2)IE6/IE77对FireFox<from针对firefoxie6ie7的css样式>
  *+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.  *上面第一点指明
  代码:
  <style>
  #wrapper{width:120px;}/*FireFox*/
  *html#wrapper{width:80px;}/*ie6fixed*/
  *+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/
  </style>

注意:
*+html对IE7的兼容必须保证HTML顶部有如下声明:

代码:
  <!DOCTYPE HTML PUBLIC“-//W3C//DTD HTML4.01 Transitional//EN””http://www.w3.org/TR/html4/loose.dtd“>

 

3.其他兼容技巧(相当有用)
  1,FF下给div设置padding后会导致width和height增加,但IE不会.(可用!important解决)
  2,居中问题.
  1).垂直居中.将line-height设置为当前div相同的高度,再通过vetical-align:middle.(注意内容不要换行.)
  2).水平居中.margin:0auto;(当然不是万能)  虽然不是万能但见识有限,未能知道那个浏览器不适合此方法,知道的朋友指教!
  3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签,本人尝试过错误,padding如何设置padding-left都无效,其实原理就是使a标签像div一样以块元素定义)
  4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.
  5,ul标签在FF下面默认有list-style和padding.最好事先声明,以避免不必要的麻烦.(常见于导航标签和内容列表)(好的习惯是文件开头设置好)*{margin:0;padding:0;} *不提倡这样用,各个写明好点。
  6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden.以达到高度自适应.(自适应高度成都网络营销习惯使用:尾部添加<div style="clear:both;">)
  7,关于手形光标.cursor:pointer.而hand只适用于IE.贴上代码:
  8、IE6的双倍边距BUG
  <styletype=”text/css”>
  body{margin:0}
  div{float:left;margin-left:10px;;height:200px;border:1pxsolidred}
  </style>
  浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline  这个是经典就不说了。

 

 

文章大多引用于网络,部分见解,不排除重复出现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值