首页所有案例网站建设微信公众号开发电商视觉APP开发网络营销公司最新联系咨询

工作中常用的十大浏览器兼容性问题

2017年06月30日

兼容性一直都是前端工程师最头疼的一个问题,也是前端面试最常考的一个方面,今天看到一位前端程序员总结的一份很好的关于浏览器兼容性问题的文章,正好最近群里有许多的需要面试伙伴,所以稍微挑了十个常用的浏览器兼容问题分享出来,希望大家面试顺利!

前端兼容性问题一:padding

在Firefox设置了 padding 一后,div会增加 height 和 width,但IE不会 。

解决方式:尝试使用 height:100%或者控制好高度;宽度减少使用 padding但根据实际经验,一般Firefox和IE的 padding 不会有太大区别,div 的实际宽 = width + padding ,所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。

前端兼容性问题二:高度

两上下排列或嵌套的div,上面的div设置height,如果div里的实际内容大于所设高度,在Firefox中会出现两个div重叠的现象;在IE中,下面的div会自动给上面的div让出空间

解决方式:高度要控制恰当,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,闭和前加一个沉底的空div,对应CSS是:

.float_bottom

{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

前端兼容性问题三:IE浮动 margin产生的双倍距离

#box{
float:left;
wiadth:100px;
margin:0 0 0 100px;//这种情况之下IE会产生200px的距离
display:inline;//使浮动忽略

前端兼容性问题四:clear:both;

不想受到float浮动的,就在div中写入clear:both;

前端兼容性问题五:居中问题

div里的内容,IE默认为居中,而Firefox默认为左对齐,可以尝试增加代码margin: 0 auto;

前端兼容性问题六:列表类

·ul标签在FF中默认是有 padding值的,而在IE中只有margin有值先定义 ul {margin:0;padding:0;}

·ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成:{list-style:none;margin:0px;padding:0px;}

前端兼容性问题七:显示类(display:block,inline)

1. display:block,inline两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素,元素的特点是:

总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度

<div>,<p>,<h1>,<form>,<ul> 和 <li> 是块元素的例子

display:inline 就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。<span>,<a>,<label>,<input>,<img>,<strong> 和 <em> 是 inline 元素的例子

2.鼠标手指状显示

全部用标准的写法 cursor: pointer;

前端兼容性问题八:背景、图片类

1. background显示问题

全部注意补齐 width,height 属性

2.背景透明问题

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

IE: filter: alpha(opacity=10);

Firefox: opacity:0.6;

Firefox: -moz-opacity:0.10;

最好两个都写,并将opacity属性放在下面

前端兼容性问题九:min-height最小高度的实现(兼容IE6、IE7、Firefox)

作用是:当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果。而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化。

#mrjin {
    background: #ccc;
    min-height: 100px;
    height: auto !important;
    height: 100px;
    overflow: visible;
}

前端兼容性问题十:为什么web标准中无法设置IE浏览器滚动条颜色了?

body {
    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;}

原来样式设置:

解决办法是将body换成html。


本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

标签: 网站设计公司 、 网站建设公司 、 网站制作 、 网站设计 、 网站建设 、 广州网站设计公 司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作

填写服务需求或选择下列套餐服务。

 创业版建站套餐 9800 经典版建站套餐 18000 豪华版建站套餐 26000> 微商城个性版 28000>

* 服务套餐价格会不定时变化,请认真填写需求信息,我们会在24小时内与您取得联系。

网站建设套餐

创业版9800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
1个初稿方案(可修改1次)
15个工作日
金牌1对1服务(不接受面谈)
服务内容
1.5个页面设计,3屏=1页.
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.留言管理系统
6.在线客服
赠送内容
1.免费维护1年
2.SEO关键词设置
3.第三方流量统计

网站建设套餐

经典版18000元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
2个初稿方案(可修改2次)
20个工作日
金牌1对1全程上门服务
服务内容
1.10个页面设计,3屏=1页.
2.H5动效设计
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.招聘管理系统
6.留言管理系统
7.在线客服
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.1000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词设置
7.第三方流量统计

网站建设套餐

豪华版26000元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
高级设计+高级前端+高级程序
3个初稿方案(可修改5次)
30个工作日
金牌1对1全程上门服务
服务内容
1.20个页面设计,3屏=1页.
2.H5动效设计
3.后台管理系统
4.新闻管理系统
5.产品管理系统
6.招聘管理系统
7.留言管理系统
8.基础会员功能
9.在线客服
10.第三方插件接入
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词优化指导
7.SEO关键词设置
8.第三方流量统计

微信商城套餐

微商城个性版 28000

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
永久版微商城
高级设计+高级前端+高级程序
2个初稿方案
35个工作日
金牌1对1全程上门服务
服务内容
1.整套UI设计
2.会员管理
3.商品管理
4.订单管理
5.内容管理
6.广告管理
7.促销管理
8.报表统计
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.第三方流量统计
线上服务咨询020-82352603填写需求索取报价