搜索
首页web前端css教程CSS3的浏览器兼容问题
CSS3的浏览器兼容问题
php中世界最好的语言
php中世界最好的语言
Mar 22, 2018 pm 02:14 PM
css3firefoxwebkit

这次给大家带来CSS3的浏览器兼容问题，CSS3浏览器兼容的注意事项有哪些，下面就是实战案例，一起来看一下。

本篇介绍了CSS3与页面布局学习总结——浏览器兼容与前端性能优化，具体如下：

一、浏览器兼容

1.1、概要

世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要考虑三方面：

1)、CSS兼容

2)、JavaScript兼容

3)、HTML兼容

这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解浏览器的发动机—内核。

多年前我们一直为IE6兼容烦恼，为它没少加班；盼走了IE6现在又出现了IE8，看来兼容没有尽头...

1.2、浏览器内核

Trident

Microsoft公司浏览器内核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。

Gecko

Firefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。

Presto

Opera前内核，已废弃，Opera现已改用Google Chrome的Blink内核。

Webkit

Safari内核,Chrome内核原型,开源，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 傲游浏览器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。

edge

微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计以后微软的新浏览器会继续采用该内核。

1.3、浏览器市场份额（Browser Market Share）

能过浏览器的市份额我们可以在处理浏览器兼容性时会更加关注市场份额高的浏览器，适当的时候可以放弃市场份额占有量小的浏览器。

国际：

查询地址：https://www.netmarketshare.com

2016年12月PC浏览器数据

2016年12月平板+移动数据

2016年浏览器份额变化

国内：

查询地址：http://tongji.baidu.com/data/browser

从上图可以看出，我们在针对PC Web开发时需要重点关注Chrome、IE浏览器，开发Mobile项目时要重点关注Chrome浏览器与Safari。

1.4、兼容的一般标准

1)、在不同的主流的浏览器上表现效果一致

2)、能适应不同的屏幕大小

3)、能适应不同的分辨率与色彩深度

浏览器兼容在线测试：

http://browsershots.org/

http://browsershots.org/

IE测试可以安装：IETester在本地测试。

 1.5、CSS Reset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

如全局重置*{ padding: 0; margin: 0; border:}虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。这个网站http://cssreset.com/有最新的CSSReset提供给大家参考。

Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)

http://nicolasgallagher.com/about-normalize-css/

https://github.com/necolas/normalize.css

示例：请看第2章的内容

1.6、CSS Hack

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。

1.6.1、条件注释法

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。

gt : greater than，选择条件版本以上版本，不包含条件版本 >

lt : less than，选择条件版本以下版本，不包含条件版本 <

gte : greater than or equal，选择条件版本以上版本，包含条件版本>=

lte : less than or equal，选择条件版本以下版本，包含条件版本 <=

! : 选择条件版本以外所有版本，无论高低

*只有IE浏览器认识条件注释、其它浏览器会跳过

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--[if gt IE 6]>
            <style>
                body{
                    background:lightblue;
                }
            </style>
        <![endif]-->
        
        <!--[if lt IE 8]>
        <script type="text/javascript">
            alert("您的浏览器Out了，请下载更新。");
        </script>
        <![endif]-->
    </head>
    <body>
        <!--[if gt IE 6]>
            <h2>大于IE6版本的浏览器</h2>
        <![endif]-->
    </body>
</html></p>
<p style="text-align: left;">效果：</p>
<p style="text-align: left;"> IE8</p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d30d5245a3f8c337eaa1781b9617f2f8-12.png" class="lazy" alt=""></p>
<p style="text-align: left;">chrome</p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d30d5245a3f8c337eaa1781b9617f2f8-13.png" class="lazy" alt=""></p>
<p style="text-align: left;">ie6</p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d30d5245a3f8c337eaa1781b9617f2f8-14.png" class="lazy" alt=""></p>
<p style="text-align: left;"><strong> 1.6.2、样式内属性标记法</strong></p>
<p style="text-align: left;">在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。</p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/dd9c2313b2026910268c19b3101bec1f-15.png" class="lazy" alt=""></p>
<p style="text-align: left;">http://browserhacks.com/在线查询， 这一个功能强大的提供各种针对性兼容办法的网站，非常实用。</p>
<p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/dd9c2313b2026910268c19b3101bec1f-16.png" class="lazy" alt=""></p>
<p style="text-align: left;">“-″下划线是IE6专有的hack</p>
<p style="text-align: left;">“\9″ IE6/IE7/IE8/IE9/IE10都生效</p>
<p style="text-align: left;">“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack</p>
<p style="text-align: left;">“\9\0″ 只对IE9/IE10生效，是IE9/10的hack</p>
<p style="text-align: left;">这里以IE6双边距问题为例。</p>
<p style="text-align: left;">代码：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #p1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;        
                margin-left: 100px;
                _margin-left: 50px;        
            }
        </style>
    </head>
    <body>
        <p id="p1"></p>
    </body>
</html>

效果：

 1.6.3、选择器前缀法

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

《hack速查表》：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>hack速查表</title>
    <style type="text/css">
        /*reset*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
            height: 100%;
            text-align: center;
            background: #fff;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
            font-weight: normal;
        }
        /* Tables still need 'cellspacing="0"' in the markup. */
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        em {
            font-style: normal;
            color: #f00;
        }
        
        h1 {
            font-size: 2em;
            font-weight: 700;
        }
        
        .hack {
            width: 1000px;
            margin: 0 auto;
            text-align: left;
        }
        
        .hack table {
            width: 100%;
            margin: 10px 0;
        }
        
        .hack td,
        .hack th {
            height: 30px;
            padding: 0 5px;
            border: 1px solid #ccc;
        }
        
        .hack th {
            color: #cc0bf6;
        }
        
        .hack th.eq,
        .hack td.eq {
            width: 350px;
            color: #333;
        }
        
        .hack th.identifier,
        .hack td.hack-data {
            width: 350px;
            color: #61602f;
        }
        
        .hack td.no {
            color: #fff;
            text-align: center;
            background-color: red;
        }
        
        .hack td.yes {
            color: #fff;
            text-align: center;
            background-color: green;
        }
        
        .hack p b {
            color: green;
        }
        
        .hack p b.red {
            color: red;
        }
        
        .hack h2 {
            margin: 10px 0 0 0;
            font-size: 1.5em;
            font-weight: 700;
        }
        
        .hack-list {
            margin: 10px 0;
        }
        
        .hack-list li {
            margin-bottom: 5px;
            zoom: 1;
        }
        
        .hack-list span {
            float: left;
            width: 15px;
            font-family: "\5b8b\4f53";
        }
        
        .hack-list-inf {
            padding: 0 0 0 15px;
        }
        
        .hack-list em {
            display: inline-block;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <h1>hack速查表</h1>
    <p class="hack">
        <p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>
        <p>以下是我总结的HACK书写方法:</p>
        <p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>
        <p>测试环境：windows系统;</p>
        <p>DOCTYPE:
            <!doctype html>.</p>
        <table cellpadding="0">
            <thead>
                <tr>
                    <th class="identifier">标志符</th>
                    <th class="eq">示例</th>
                    <th>IE6</th>
                    <th>IE7</th>
                    <th>IE8</th>
                    <th>IE9</th>
                    <th>FF</th>
                    <th>OP</th>
                    <th>SA</th>
                    <th>CH</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="hack-data">*</td>
                    <td>.eq {*color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">_</td>
                    <td>.eq {_color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">+</td>
                    <td>.eq {+color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">-</td>
                    <td>.eq {-color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">></td>
                    <td>.eq {>color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\0</td>
                    <td>.eq {color:#000\0;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\9</td>
                    <td>.eq {color:#000\9;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">\9\0</td>
                    <td>.eq {color:#000\0;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td>N\Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">:root .xx{xxx:xxx\9;}</td>
                    <td>:root .eq {color:#a00\9;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*+</td>
                    <td>.eq {*+color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*-</td>
                    <td>.eq {*-color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*html</td>
                    <td><span class="hack-data">*html</span> .eq {color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*+html</td>
                    <td><span class="hack-data">*+html</span> .eq {color:#000;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">html*</td>
                    <td>html* .eq {color:#000;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">[;</td>
                    <td>.eq {color:red;[;color:blue;}</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html>body</td>
                    <td>html>body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html>/**/body</td>
                    <td>html>/**/body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">html/**/>body</td>
                    <td>html/**/>body .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">@media all and (min-width:0px){}</td>
                    <td><span class="hack-data">@media all and (min-width:0px){.eq {color:#000;}}</span></td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">*:first-child+html</td>
                    <td>*:first-child+html .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">*:first-child+html{} *html</td>
                    <td>*:first-child+html{} *html .eq {color:blue;}</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">@-moz-document url-prefix(){}</td>
                    <td>@-moz-document url-prefix(){ .eq {color:blue;}}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">@media screen and (-webkit-min-device-pixel-ratio:0){}</td>
                    <td>@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
                <tr>
                    <td class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}</td>
                    <td><span class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</span></td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                </tr>
                <tr>
                    <td class="hack-data">body:nth-of-type(1)</td>
                    <td>body:nth-of-type(1) .eq {color:blue;}</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="no">N</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                    <td class="yes">Y</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th class="identifier">标志符</th>
                    <th class="eq">示例</th>
                    <th>IE6</th>
                    <th>IE7</th>
                    <th>IE8</th>
                    <th>IE9</th>
                    <th>FF</th>
                    <th>OP</th>
                    <th>SA</th>
                    <th>CH</th>
                </tr>
            </tfoot>
        </table>
        <p>FF:firefox; OP:opera; SA:safari; CH:chrome; <b>Y</b>代表支持，<b class="red">N</b>代表不支持。</p>
        <h2>注意事项：</h2>
        <ul class="hack-list">
            <li><span>·</span>
                <p class="hack-list-inf">由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。</p>
            </li>
            <li><span>·</span>
                <p class="hack-list-inf"><em>[;</em>此种方式会影响后续样式，不可取。</p>
            </li>
            <li><span>·</span>
                <p class="hack-list-inf"><em>\9\0</em>并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。</p>
            </li>
            <li><span>·</span>
                <p class="hack-list-inf">当同时出现<em>\0</em>;<em>*</em>;<em>_</em>;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。 </p>
            </li>
        </ul>
        <h2>推荐写法：</h2>
        <h3>demo:</h3>
        <pre class="brush:php;toolbar:false">
        .eq {
             color:#f00;/*标准浏览器*/
             color:#f30\0;/*IE8,IE9,opera*/
             *color:#c00;/*IE7及IE6*/
             _color:#600;/*IE6专属*/
            }
        :root .eq {color:#a00\9;}/*IE9专属*/
        @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/
        @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/
        @-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/
  
    

 示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @media screen\0 {
                body {
                    background: lightblue;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

 运行结果：

 1.7、文档模式 （X-UA-Compatible）

文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。

<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >//最新IE

“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号

EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5

9：强制以IE9标准模式渲染页面，忽略文档类型声明

x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />

Google Chrome Frame(谷歌内嵌浏览器框架GCF)

插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核

未指定文档模式时使用默认的文档模式示例： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>X-UA-Compatible</title>
        <style>
            #p1 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin-left: 100px;
                _margin-left: 50px;
            }
        </style>
    </head>
    <body>
        <p id="p1"></p>
    </body>
</html>

运行结果：

强制指定文档模式为IE6，在IE8下会自动变成怪异模式，简单说IE8被当作IE6在用。

多数情况下我们不会这样降级使用，一般会将IE选择为最新版本的文档模式（注意不是文档类型），如果IE浏览器使用了GCF技术我们应该强制使用最新版内核，写入如下：

现在多数网站这是这种写法如baidu。

 1.8、javascript兼容

这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。

第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：

1、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS

像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。

2、浏览器检测、重新封装

使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2 id="msg"></h2>
        <script type="text/javascript">            
            //用于检测浏览器是否为IE
            var isIE=function(){
                return !!window.ActiveXObject;
            }
        
            function show(info){
                document.getElementById("msg").innerHTML+=info+"<br/>"
            }
            
            //获得用户代理对象，浏览器与操作系统信息
            show(navigator.userAgent);
            show(isIE()?"是IE浏览器":"不是IE浏览器");
        </script>
    </body>
</html>

效果：

在user-agent中包含有不少的客户端信息，可以解析出判断浏览器部分的内容。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css中的float的图文详解

linear-gradient的使用详解

以上是CSS3的浏览器兼容问题的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
Ubuntu Linux中如何删除Firefox Snap？Ubuntu Linux中如何删除Firefox Snap？Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中删除FirefoxSnap，可以按照以下步骤进行操作：打开终端并以管理员身份登录到Ubuntu系统。运行以下命令以卸载FirefoxSnap：sudosnapremovefirefox系统将提示你输入管理员密码。输入密码并按下Enter键以确认。等待命令执行完成。一旦完成，FirefoxSnap将被完全删除。请注意，这将删除通过Snap包管理器安装的Firefox版本。如果你通过其他方式（如APT包管理器）安装了另一个版本的Firefox，则不会受到影响。通过以上步骤

css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

mozilla firefox可以卸载吗mozilla firefox可以卸载吗Mar 15, 2023 pm 04:40 PM

mozilla firefox可以卸载；firefox属于第三方浏览器，如果不需要，完全可以卸载。卸载方法：1、在开始菜单中，依次点击“Windwos系统”-“控制面板”；2、在“控制面板”界面中，点击“程序和功能”；3、在新界面中，找到并双击火狐浏览器图标；4、在卸载弹窗中，点击“下一步”；5、点击“卸载”即可。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

火狐浏览器Firefox 113 新特性：支持AV1动图、增强密码生成器和画中画特性火狐浏览器Firefox 113 新特性：支持AV1动图、增强密码生成器和画中画特性Mar 05, 2024 pm 05:20 PM

近日消息，Mozilla在发布Firefox112稳定版的同时，也宣布下个主要版本Firefox113进入Beta频道，支持AV1动图、增强密码生成器和画中画特性。火狐浏览器Firefox113主要新功能/新特性如下支持AV1格式动图(AVIS)通过引入特殊字符来增强密码生成器的安全性增强画中画功能，支持后退、显示视频时间，能更轻松地启用全屏模式为Debian和Ubuntu发行版提供官方DEB安装文件更新书签导入功能，默认情况下支持导入书签的图标在支持的硬件上默认启用硬件加速AV1视频解码使用w

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD
显示更多

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7435
15
CakePHP 教程
1359
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
29
19
显示更多