码迷,mamicode.com
首页 > Web开发 > 详细

css兼容性问题总结

时间:2017-04-06 18:54:21      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:标签   针对   最好   理解   设置   port   通用   and   http   

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  这个是经典就不说了。

 

css兼容性问题总结

标签:标签   针对   最好   理解   设置   port   通用   and   http   

原文地址:http://www.cnblogs.com/si-ying/p/6674625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!