易简.道(ething)

爱在进行时
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Css在IE和火狐的兼容性总结

Posted on 2010-02-26 11:42  如是如是  阅读(267)  评论(0编辑  收藏  举报

 

1、cursor:hand VS cursor:pointer

  firefox不支持hand,但ie支持pointer

  解决方法: 统一使用pointer

  2、innerText在IE中能正常工作,但是innerText在FireFox中却不行.

  解决方法:

  if(navigator.appName.indexOf("Explorer") >-1){

  document.getElementById('element').innerText = "my text";

  } else{

  document.getElementById('element').textContent = "my text";

  }

  3、FireFox中类似 obj.style.height = imgObj.height 的语句无效

  解决方法:

  obj.style.height = imgObj.height + 'px';

  4、ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。

  解决方法:

  //向table追加一个空行:

  var row = otable.insertRow(-1);

  var cell = document.createElement("td");

  cell.innerHTML = "";

  cell.className = "XXXX";

  row.appendChild(cell);

  5、 padding 问题

  padding 5px 4px 3px 1px FireFox无法解释简写,

  必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

  6、 消除ul、ol等列表的缩进时

  样式应写成:list-style:none;margin:0px;padding:0px;

  其中margin属性对IE有效,padding属性对FireFox有效

  7、 CSS透明

  IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

  FF:opacity:0.6。

  8、CSS圆角

  IE:不支持圆角。

  FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

  9、 CSS双线凹凸边框

  IE:border:2px outset;。

  FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;