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

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

前端兼容性问题一：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。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

新闻标题：工作中常用的十大浏览器兼容性问题
文章来源：https://www.cdcxhl.com/news27/316927.html

成都网站建设公司_创新互联，为您提供建站公司、虚拟主机、小程序开发、ChatGPT、商城网站、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联