老司机带你解决浏览器兼容

关注

原创最新推荐文章于 2026-10-10 09:14:07 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

RTL低功耗设计验证入门：手把手教你用VCS跑通第一个UPF仿真案例本文详细介绍了如何使用VCS工具和UPF流程进行RTL低功耗设计验证，从搭建基础仿真环境到编写UPF文件，再到VCS仿真配置和结果分析。通过实战案例，帮助读者快速掌握低功耗仿真技术，提升芯片设计中的功耗优化能力。阅读详情

为什么会出现浏览器兼容问题？

1、各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦
2、由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床

浏览器内核代表及代表作品

Trident 代表作：IE
- 元老级内核之一，有微软开发，并于1997年10月首次在ie4.0中使用，凭借其windows垄断优势，Trident市场占据率一直很高。然后垄断优势，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持HTML5和 CSS3,因此我们也经常会看到有些网站在浏览时会提示用户（在Internet Explorer 9.0+以上浏览效果最佳）。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了
Gecko 代表作：Mozilla
- 元老级内核之一，由Netscape公司Mozilla组织开发。1998年，Netscape在于IE浏览器竞争失利之后，成立了非正式组织Mozilla，由其开发新一代内核，后命名为“Gecko”。FireFox也是这班人开发出来了，因此这也就是Mozilla一直使用的内核。Gecko的特点是代码完全公开，因此其开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
WebKit 代表作：Safari 和Google旧版
- 这是苹果公司开发的内核，也是其旗下产品Ssfari浏览器使用的内核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分别是从KDE的KHTML和KJS衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统开发。 Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核（在脚本理解方面，Chorome使用自己研发的V8引擎）。
Blink 代表作：Google 和 Opera
- 这是由Google和Opera Software开发的浏览器排版引擎，Google计算将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）浏览器中使用
Presto ( Opera前内核已经废弃 )

针对上述常见的浏览器由于使用的内核和规范都不完全同一，因此会出现一些浏览的兼容问题。

常见的浏览器兼容问题

1.min-height最小高度兼容

在IE6浏览器不识别改属性，IE6兼容元素最小高度自适应方法：
方法1：min-height:200px;_height:200px;
方法2：min-height:200px;height:auto !important;height:200px;（不能换顺序）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            min-height: 200px;
            background: red;
            /* 解决方法使用过滤器 */
            /* _height:200px; 第一种解决方法 */
            /* height: auto !important;
            height: 200px; 第二种解决方法 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

和img相关的兼容

1.当图片添加<a href="#"></a>在IE上会出现边框，
解决方案：
给图片添加border:0;或者border:none;
2.图片缝隙问题 在网页中插入图片的时候，图片会默认向下撑大3px
解决方案：
将图片元素转为块元素display:block;或者给img标签添加声明vertical-algin:top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ 
            border: 5px solid red;
            overflow: hidden;
        }
        img {
            /* 第一种解决方法 */
            /* display: block; */
            /* 第二种解决方法 */
            vertical-align: top;
            
        }
    </style>
</head>
<body>
    <div><img src="./img/u=1468287185,598790534&fm=111&gp=0.jpg" alt=""></div>
</body>
</html>

表单相关的兼容

表单元素距离顶部间距不一致
解决方案：
给表单元素声明:float:left;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;padding: 0;
        }
       input{
           float: left;
       } 
    </style>
</head>
<body>
    <input type="text">
    <button>按钮</button>
</body>
</html>

鼠标指针兼容

cursor属性的hand属性值只有在IE9以下浏览器识别，其他浏览器不识别该声明。
解决方案：
cursor:pointer;
下面图一是谷歌浏览器显示hand的鼠标
图二是IE8的显示，是可以显示出小手的形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /* cursor: hand; */
            /* 解决方案 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

图一

图二

margin-top的兼容

给子元素设置任何浮动，设置了margin-top属性后，或错误的吧margin-top的属性值添加个父元素
解决方案：
1.给子元素或者父元素设置浮动
2.给父元素添加上边框
3.给父元素添加overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;padding: 0;
        }
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 第一种方法 */
            /* overflow: hidden; */
            /* 第二种方法 */
            /* float: left; */
            /* 第三种方案 */
            /* border: 1px solid transparent; */
        }
        .son {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-top: 50px;
            /* 第四种解决方案 */
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

透明属性兼容问题

一般浏览器使用透明属性只需要opacity：value(value的取值范围0-100整数)
但是在IE浏览器中这个属性无法被单独识别
解决方法：
filter:alpha(opacity=value)取值范围0-100整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            opacity: .5;
            /* 解决方法 IE */
            /* filter: alpha(opacity=50); */
        }
    </style>
</head>
<body>
  <div></div>  
</body>
</html>

谷歌浏览器字号兼容

谷歌浏览器最小字号只支持到12px，12px以下的字号不支持
解决方案：
1.直接切图
2.在html或者body里添加一句浏览器专有属性-weblit-text-size-adjust:none;注意在新本的谷歌浏览器中已经不生效了
3.CSS的一个缩放属性：transform:scale();同时需要配合transform-orgin属性才能达到完美的显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;padding: 0;
            /* 第一种解决方案 最新谷歌浏览器没有用 */
            /* -webkit-text-size-adjust: none; */
        }
        p{
            font-size: 6px;
            background: skyblue;
            /* 第二种解决方案 */
            transform: scale(.5);
            transform-origin: left center;
            /* 第三种切图方式就是插入图片，自行操作 */
        }
    </style>
</head>
<body>
    <p>你好</p>
</body>
</html>

这是在谷歌12px的字体大小

这是在谷歌浏览器下设置6px的文字，是没有发生变化的

这是IE浏览器中6px显示的效果，文字的确变小

通过以上方案解决后显示的效果

图片png24格式兼容

图片png24格式在IE6上不透明
解决方法：
把png24格式换成png8或者gif格式

双倍边距兼容

在IE6及更低版本浏览器在解析浮动元素是，会错误把浮向边边界(margin)加倍显示
解决方案：
给浮动元素添加声明：display:inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,ul,li {
            margin: 0;
            padding: 0;
        }
        li {
            /* 解决方案 */
            display: inline;
            margin-left: 40px;
            list-style: none;
            border: 4px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li>你好美女</li>
        <li>你好美女</li>
        <li>你好美女</li>
        <li>你好美女</li>
    </ul>
</body>
</html>

input默认边框兼容

在IE6及更低版本的浏览器里，如果想去掉input的默认边框，不能设置border:none;
解决方案:
input{border:0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            border: 0;
        }
    </style>
</head>
<body>
    <input type="text" value="你好">
</body>
</html>

这是使用border:none;无法取出input的边框

这里使用border:0;可以解决input边框问题

input内文字高度居中问题

如果设置了input的高度，在其他浏览器上显示的value的内容垂直居中的，但是在IE6上是顶部的
解决方案：
给input添加一个行高等于他的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{

        height: 50px;
        line-height: 50px;
        }
    </style>
</head>
<body>
    <input type="text" value="你好美女">
</body>
</html>

没有使用行高等于高度出现的兼容

使用行高等于高度完美解决文字偏上问题

IE6及以下解析百分比兼容问题

在IE及以下版本中在解析百分比时，会四舍五入方式计算从而导致50%加50%大于100%的情况
解决方案：
给右边浮动元素添加声明clear:both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;padding: 0;
        }
        .b1{
            width: 50%;
            height: 200px;
            float: left;
            background: red;
        }
        .b2 {
            /* 解决方案 */
            clear: right;
            width: 50%;
            height: 200px;
            float: left;
            background: yellow;
        }

    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
</body>
</html>

解析百分比大于100%的情况

解决后的显示效果

IE7以下li向下撑大3-4px的兼容

IE7及以下浏览器li有时候会莫名向下撑大3-4px
解决方案：
给li添加一个+margin-top:-3px或者-4px;

在解决IE问题中会经常使用过滤器

1) 下划线属性过滤器  选择符{_属性:属性值;}由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6更低版本浏览器中会继续解析这个规则
2)!important关键字过滤器 选择符{属性:属性值 !important;}他表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其他标准浏览器。
3) \9  选择符{属性:属性值\9;}  IE浏览器组识别
4) \0 选择符{属性:属性值\0;}   只有IE8以上浏览器起作用
5) + 或着 * 选择符{属性:属性值;} IE7及以下
6) :root选择器  :root 选择符{属性:属性值;}  除了IE8及更早的浏览器识别

收录于