zoukankan      html  css  js  c++  java

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

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

    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{
             200px;
            min-height: 200px;
            background: red;
            /* 解决方法使用过滤器 */
            /* _height:200px; 第一种解决方法 */
            /* height: auto !important;
            height: 200px; 第二种解决方法 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    UTOOLS1582443317904.png

    和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>

    UTOOLS1582444189134.png

    表单相关的兼容
    表单元素距离顶部间距不一致
解决方案：
给表单元素声明: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>

    UTOOLS1582444451388.png

    鼠标指针兼容
    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{
             200px;
            height: 200px;
            background: red;
            /* cursor: hand; */
            /* 解决方案 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

    图一

    UTOOLS1582445132451.png

    图二

    UTOOLS1582445238024.png

    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{
             200px;
            height: 200px;
            background-color: red;
            /* 第一种方法 */
            /* overflow: hidden; */
            /* 第二种方法 */
            /* float: left; */
            /* 第三种方案 */
            /* border: 1px solid transparent; */
        }
        .son {
             100px;
            height: 100px;
            background: yellow;
            margin-top: 50px;
            /* 第四种解决方案 */
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

    UTOOLS1582445727777.png

    透明属性兼容问题
    一般浏览器使用透明属性只需要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{
             200px;
            height: 200px;
            background: red;
            opacity: .5;
            /* 解决方法 IE */
            /* filter: alpha(opacity=50); */
        }
    </style>
</head>
<body>
  <div></div>  
</body>
</html>

    UTOOLS1582446265759.png

    谷歌浏览器字号兼容
    谷歌浏览器最小字号只支持到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的字体大小

    UTOOLS1582446592786.png

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

    UTOOLS1582446690322.png

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

    UTOOLS1582446734018.png

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

    UTOOLS1582447009501.png

    图片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>

    UTOOLS1582447760139.png

    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的边框

    UTOOLS1582448038010.png

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

    UTOOLS1582448115768.png

    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>

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

    UTOOLS1582448327279.png

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

    UTOOLS1582448371816.png

    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{
             50%;
            height: 200px;
            float: left;
            background: red;
        }
        .b2 {
            /* 解决方案 */
            clear: right;
             50%;
            height: 200px;
            float: left;
            background: yellow;
        }

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

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

    UTOOLS1582448684382.png

    解决后的显示效果

    UTOOLS1582448758534.png

    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及更早的浏览器识别

    ​ 逆战班_许富荧
  • 相关阅读:
    Python常用函数
    Mock测试&Postman mockserver详细教程
    openpyxl模块
    adb 'grep' 不是内部或外部命令，也不是可运行的程序或批处理文件
    Appium-Python-Windows环境搭建笔记
    调用类方法时报错：missing 1 required positional argument: 'self'
    RE正则表达式-元字符
    微分方程
    操作系统学习记录
    Mybatis基础配置
  • 原文地址：https://www.cnblogs.com/xfy196/p/12354084.html
Copyright © 2011-2022 走看看