CSS中各个浏览器兼容的解决办法

转载 2016年08月30日 14:11:30

1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义
!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别

区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
IE7,IE8兼容:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

2. IE专用的条件注释
<!–其他浏览器 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]>
<!– 适合于IE7 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if lte IE 6]>
<!– 适合于IE6及一下 –>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

3. 几个浏览器对实际像素的解释
IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla: 对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4. 鼠标手势问题:FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持;所以为了兼容都用pointer

5. FireFox中设置HTML标签的Style属性时,所有位置、宽高和尺寸值必须后跟px,IE也支持此写法,因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px';

6. FireFox无法解析简写的padding属性设置,如padding 5px 4px 3px 1px;必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;

7. 消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效

8. CSS控制透明:IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox:opacity:0.6;

9. CSS控制圆角:IE:不支持圆角;

FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;

10. CSS双线凹凸边框:IE:border:2px outset;

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

11. IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格;FireFox对以上两者均不支持

12. IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用

13. IE支持Form中的Label标签,包括图片和文字内容;FireFox不支持包含图片的Label,点击图片不能让标记 label for 的Radio或CheckBox产生效果

14. FireFox中的TextArea不支持onScroll事件

15. FireFox不支持display的inline和block

16. FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行

17. FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18. 对超链接的CSS样式设置最好遵从这样的顺序:L-V-H-A。即
<style type=”text/css”>
<!–
a:link {}
a:visited {}
a:hover {}
a:active {}
–>
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了

19. IE中设置长段落自动换行在CSS中设置word-wrap:break-word;FireFox中使用JS插入 的方法来实现,具体代码如下:
<script type=”text/javascript”>
/* <![CDATA[ */
function toBreakWord(el, intLen){
var obj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp=””;
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+” “;
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=” “+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(“div_id”, 37);
/* ]]> */
</script>

20. 在子容器加了浮动属性后,该容器将不能自动撑开
解决方法:在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;

相关文章推荐

div css 浏览器兼容问题的一点解决办法

浏览器之间的css互相不兼容,相信网页制作人员都会深恶痛绝。 收集了一些常见的兼容问题解决方法 与大家一起分享 1. 文字大小不兼容。 同样14px的宋体字,ie下实际占高16px,下留...
  • Donthan
  • Donthan
  • 2012年02月24日 01:14
  • 498

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器...

div+css 浏览器兼容问题的解决办法

浏览器之间的css互相不兼容,相信网页制作人员都会深恶痛绝。 成都网站设计公司收集了一些常见的兼容问题解决方法 与大家一起分享 1. 文字大小不兼容。 同样14px的宋体字,ie下实际占高1...

实际工作总结的CSS兼容解决办法

  • 2014年05月03日 13:57
  • 337KB
  • 下载

浏览器间不兼容原因及解决办法

网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样...
  • woaixhq
  • woaixhq
  • 2011年01月17日 16:28
  • 1020

谷歌浏览器input上下不对齐兼容解决办法

最近项目中,需要写一个搜索框样式(样式很简单)如下: 当写完代码,进行浏览器兼容性测试的时候,发现在谷歌浏览器下文本框和按钮没有对齐,文本框偏下一点,其他浏览器正常;样式如下: 原因:文本框高度少...
  • bwq2016
  • bwq2016
  • 2016年10月27日 14:28
  • 284

web项目发布到IIS上 360浏览器不兼容jQuery的解决办法

在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢? 问题的提出:      Web页面在360的浏览器上,显示不正确。 ...
  • mikun
  • mikun
  • 2015年09月18日 09:57
  • 2941

js浏览器兼容问题总结及解决办法

javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下...
  • comeonJ
  • comeonJ
  • 2014年02月19日 10:44
  • 8181

让Bootstrap 3(兼容IE8浏览器)在IE8下未能自适应解决办法

最近在研究Bootstrap(官方,Github) 这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜 单...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中各个浏览器兼容的解决办法
举报原因:
原因补充:

(最多只允许输入30个字)