首页 > 代码库 > 浅谈浏览器的兼容问题

浅谈浏览器的兼容问题

前端以产品为核心,以用户体验为基础。自然作为前段开发人员,做好用户体验,浏览器的兼容问题不可忽视,合理的布局自不必提。接下来列举几种常见的浏览器兼容问题及解决办法。

字体大小问题

FireFox浏览器的默认字体为13px;而IE浏览器默认为16px。

解决方法:指定字体大小,font-size:14px;。

ul和ol列表的缩进问题

消除ul、ol列表的缩进样式。设置样式:list-style:none;margin:0;padding:0;(margin属性针对IE生效,padding属性针对FireFox生效)。

css圆角问题

IE:IE7以下本版不支持圆角;FireFox:-moz-border-radius = 像素;。

css透明度

通用:opacity:0.8;。

IE:filter:alpha(opacity=80);。

PNG图片使用

将24位图片保存为8位。

FireFox与IE的盒子模型解释不一致相差2px

box.styel {

  width: 100px;

  border:1px solid #333;

}

IE解释为box.width = 100

FireFox解释为box.width = 100 + 1*2 =102 (加上为边框的像素)

内容超长后以省略号现实问题

FireFox不支持,IE、safar、chrom适用:

white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;

WEB标准中IE无法设置滚动条颜色

解决方法:将属性设置对象由body改为html

html { 
scrollbar-face-color:#f6f6f6; 
scrollbar-highlight-color:#fff; 
scrollbar-shadow-color:#eee
scrollbar-3dlight-color:#eee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff; 
scrollbar-darkshadow-color:#fff; 
} 

 

a标签CSS顺序

link -> visited -> hover -> active

min-height的兼容写法

min-height: 200px;

height: auto !important;

height: 200px;

overflow: visible;

 

要注意、解决和留意的似乎更多,但往往有一些问题在CSS初始化的时候就已经得到了有效的处理,随着技术和浏览器的迭代发展,作为技术人员在掌握兼容解决方法同时更应该做好推动新技术发展。老旧浏览器的兼容性问题是沉重的包袱,更重要的这种对浏览器兼容性的知识没有延续性。

 

CSS的初始化代码:

 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }

 

body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }

 

td,th,caption { font-size:14px; }

 

h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }

 

address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}

 

a { color:#555; text-decoration:none; }

 

a:hover { text-decoration:underline; }

 

img { border:none; }

 

ol,ul,li { list-style:none; }

 

input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
img{ outline: none; }
table { border-collapse:collapse; }

 

html {overflow-y: scroll;}

 

 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}

 

.clearfix { *zoom:1; }

 

end:所有的技术和“套路”都应该建立在具体的问题之上的,没有一成不变的解决方法,代码仁者见仁,体验是王道。

 

 

 

版权声明:本文为博主原创,未经博主允许不得转载。

 

 

 

 

浅谈浏览器的兼容问题