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;

CSS3中各个浏览器内核兼容的设置

CSS3中-moz、-ms、-webkit和-o分别代表什么意思 1、-moz-:代表FireFox浏览器私有属性 2、-ms-:代表IE浏览器私有属性 3、-webkit-:代表safa...
  • qq_27918787
  • qq_27918787
  • 2016年10月06日 15:30
  • 5611

解决在用HTML+DIV+CSS编写网页时,各个浏览器的兼容问题

一、解决层居中的问题 一般我们在浏览网页的时候,都会看到不同浏览器打开的同一个页面会出现不一样的布局问题。其实这是每一个初学HTML的程序员长碰见的问题。 那么给怎么解决中浏览器不兼容的问题呢? 首先...
  • zzjmay
  • zzjmay
  • 2014年03月14日 10:29
  • 2482

web前端面试题之 CSS浏览器兼容性?

CSS浏览器兼容性? 答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了。 1.对齐文本和文本输入框 问题: 当input元素在...
  • Wz1135640
  • Wz1135640
  • 2017年10月10日 14:53
  • 296

css关于margin在不同浏览器下的兼容

在学校中学的是Html,并没有学习Html5,工作后遇到这个问题。 发现只要把H4的标头改成H5的标头就能解决兼容性了(谷歌和火狐,没有去测试Ie的兼容性) 只要把改成就可以了。...
  • fjh1370505782
  • fjh1370505782
  • 2017年02月05日 11:27
  • 455

各浏览器兼容性css写法

/* 针对Chrome谷歌浏览器内核支持的CSS样式 */ @media screen and (-webkit-min-device-pixel-ratio:0) {     样式 /* 例如 ...
  • lizengzeng123
  • lizengzeng123
  • 2014年05月15日 19:41
  • 1777

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… C...
  • albert528108
  • albert528108
  • 2013年09月23日 11:54
  • 8888

常见的各个浏览器的兼容处理

列下常见的浏览器的兼容处理一、html的兼容性对于有的浏览器不支持HTML5的一些标签我们可以使用html5shiv.js来进行处理,html5shiv 内核是 IE Trident;FF 是 Ge...
  • NtosKiking
  • NtosKiking
  • 2016年09月17日 21:18
  • 2351

CSS 中为了兼容浏览器的前缀

-ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transf...
  • CNHK1225
  • CNHK1225
  • 2015年01月13日 12:07
  • 9960

css中的hack浏览器兼容性

1、不同厂商的浏览器或者某浏览器的不同版本(如IE6–IE11、Frefox、Safan、Opera、Chrome等)、对CSS的支持、解析不一样、导致在不同浏览器的环境中呈现出不一致的页面展现效果。...
  • xuelian3015
  • xuelian3015
  • 2017年05月07日 22:46
  • 108

CSS3更多属性 浏览器私有前缀

CSS3更多属性 浏览器私有前缀 1边框相关属性 1.1边框圆角border-radius 1.border-top-left-radius:10px20px;  单一选择一个角时,注意是top与bo...
  • Hyperyou
  • Hyperyou
  • 2017年07月28日 00:31
  • 380
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中各个浏览器兼容的解决办法
举报原因:
原因补充:

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