浅谈浏览器的兼容问题

Posted 2020-09-14 墨.眉

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

字体大小问题

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:所有的技术和“套路”都应该建立在具体的问题之上的，没有一成不变的解决方法，代码仁者见仁，体验是王道。

 

 

 

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