欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

分享web前端兼容性问题-CSS兼容性问题(一)-知了汇智

分享web前端兼容性问题-CSS兼容性问题(一)

       相关内容:
       分享web前端兼容性问题总结
       分享web前端兼容性问题-CSS兼容性问题(一)



  1.cursor:hand  VS  cursor:pointer
  firefox不支持hand,但ie支持pointer
  解决方法:   统一使用pointer
 
  2. innerText在IE中能正常工作,但在FireFox中却不行.
  需用textContent。
  解决方法:
  if(navigator.appName.indexOf("Explorer")  >   -1){
  document.getElementById('element').innerText   =  "my   text";
  }   else{
  document.getElementById('element').textContent  =   "my   text";
  }
 
  3. CSS透明
  IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
  FF:opacity:0.6。
 
  4. css中的width和padding
  在IE7和FF中width宽度不包括padding,在Ie6中包括padding.
 
  5. FF和IEBOX模型解释不一致导致相差2px
  box.style{width:100;border1px;}
  ie理解为box.width =100
  ff理解为box.width =100 + 1*2 = 102  //加上边框2px
  解决方法:div{margin:30px!important;margin:28px;}
  注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
  重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

分享web前端兼容性问题-CSS兼容(一)

 
  6. IE5 和IE6的BOX解释不一致
  IE5下div{width:300px;margin:0 10px 0 10px;}
  div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
 
  7. ul和ol列表缩进问题
  消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
  经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
 
  8. 元素水平居中问题
  FF: margin:0auto;
  IE: 父级{ text-align:center; }
 
  9. Div的垂直居中问题
  vertical-align:middle; 将行距增加到和整个DIV一样高:line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行。
 
  10.margin加倍的问题
  设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
  例如:
  <divid=”imfloat”>
  相应的css为
  #imfloat{
  float:left;
  margin:5px;/*IE下理解为10px*/
  display:inline;/*IE下再理解为5px*/}
 
  11.IE与宽度和高度的问题
  IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
  比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
  #box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}
 
  12.页面的最小宽度
  如上一个问题,IE不识别min,要实现最小宽度,可用下面的方法:
  #container{ min-width: 600px;width:expression(document.body.clientWidth< 600? "600px": "auto" );}
  第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
 
  13.DIV浮动IE文本产生3象素的bug
  左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
  #box{ float:left; width:800px;}
  #left{ float:left; width:50%;}
  #right{ width:50%;}
  *html #left{ margin-right:-3px; //这句是关键}
  <div id="box">
  <div id="left"></div>
  <div id="right"></div>
  </div>
 
  14.IE捉迷藏的问题
  当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
  有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
  解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

        版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用
132 2811 3191
预约免费试学
点击咨询
预约试学