CSS3 browser compatibility issues-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS3 browser compatibility issues

php中世界最好的语言

Mar 22, 2018 pm 02:14 PM

css3firefoxwebkit

This time I will bring you CSS3 browser compatibility issues. What are the precautions for CSS3 browser compatibility? Here are practical cases, let’s take a look.

This article introduces the summary of CSS3 and page layout learning - browser compatibility and front-end performance optimization, as follows:

1. Browser compatibility

1.1. Summary

No browser in the world is the same. There will be compatibility issues when the same code runs on different browsers. Different browsers have different kernels. The same kernel has different versions. The same kernel version has different browser brands. There are also differences in various operating platforms, different screen resolutions, different sizes, and different proportions. Compatibility mainly considers three aspects:

1), CSS compatibility

2), JavaScript compatibility

3), HTML compatibility

These three categories are also The main components of the front-end all have certain compatibility issues. To know yourself and the enemy, you can win every battle. Let's first understand the engine of the browser - the kernel.

We have been worrying about the compatibility of IE6 many years ago and have worked overtime for it. We were looking forward to leaving IE6 and now IE8 has appeared. It seems that the compatibility has no end...

1.2. Browser kernel

Trident

Microsoft browser kernel, IE6, IE7, IE8 (Trident 4.0), The kernel of IE9 (Trident 5.0), IE10 (Trident 6.0) and many brand browsers. The new versions of some of these browsers are "dual-core" or even "multi-core", with one core being Trident and then adding another core.

Gecko

Firefox kernel, the kernel adopted by Netscape 6, later Mozilla FireFox (Firefox browser), Mozilla Firefox, Mozilla SeaMonkey, waterfox (Firefox 64-bit Open source version), Iceweasel, Epiphany (early version), Flock (early version), and the kernel used by K-Meleon.

Presto

The former Opera kernel has been abandoned. Opera has now switched to Google Chrome's Blink kernel.

Webkit

Safari kernel, Chrome kernel prototype, open source, it is Apple's own kernel and also Apple's Safari browser The kernel used by the processor. Maxthon Browser 3, Apple Safari, (Win/Mac/iPhone/iPad), Symbian mobile browser, Android default browser

Blink

Blink is a browser made by A browser layout engine developed by Google and Opera Software. Google plans to use this rendering engine as part of the Chromium project. This rendering engine is a branch of the WebCore component in the open source engine WebKit and is used in Chrome (version 28 and later), Opera (version 15 and later).

edge

Microsoft's engine is specially built for the new IE. It is fast. A browser has been developed based on this engine. IE11 currently uses this kernel. It is estimated that Microsoft will New browsers will continue to use this core.

1.3. Browser Market Share

If we can pass the market share of the browser, we can pay more attention to the market share when dealing with browser compatibility. Browsers with high market share can abandon browsers with small market share when appropriate.

International:

Query address: https://www.netmarketshare.com

##PC browser data in December 2016

Tablet + mobile data in December 2016

Changes in browser share in 2016

domestic :

Query address: http://tongji.baidu.com/data/browser

As can be seen from the above figure, we need to focus on Chrome and IE browsers when developing PC Web, and we must focus on Chrome browser and Safari when developing Mobile projects.

1.4. General standards for compatibility

1), consistent performance on different mainstream browsers

2), able to adapt to different The screen size

3), can adapt to different resolutions and color depths

Browser compatibility online test:

http://browsershots.org/

IE test can be installed: IETester for local testing.

1.5, CSS Reset

Each browser has a set of default style sheets, that is, user agent stylesheet. The web page is When there is no specified style, the browser's built-in style sheet will be used to render. This is reasonable. There are also some reserved styles in word, which can make our layout more beautiful and neat. The default styles are different in different browsers and even different versions of the same browser. But this will have many compatibility issues. CSSReset can set the default style of all browsers to be the same.

For example, global reset*{ padding: 0; margin: 0; border:} can all be reset, but due to low performance, it is not recommended. Because * needs to traverse the entire DOM tree, when there are many page nodes, it will affect the rendering performance of the page. This website http://cssreset.com/ has the latest CSSReset for your reference.

Normalize (claimed to be an alternative to CSS reset, retaining some built-in styles, not clearing all)

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

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

Example: Please see the content of Chapter 2

1.6. CSS Hack

CSS Hack is the process of writing specific CSS styles for different browsers or different versions of browsers to achieve browser compatibility.

1.6.1. Conditional comment method

IE conditional comments (Conditional comments) are private codes of IE browser and are regarded as comments in other browsers.

gt : greater than, select a version above the conditional version, excluding the conditional version>

lt : less than, select a version below the conditional version, excluding the conditional version

gte: greater than or equal, select a version above the conditional version, including the conditional version>=

lte: less than or equal, select a version below the conditional version, include the conditional version

!: Select all versions except the conditional version, no matter high or low

*Only the IE browser recognizes the conditional comment, other browsers will skip it

Example:

nbsp;html>

    
        <meta>
        <title></title>
        <!--[if gt IE 6]>
            <style>
                body{
                    background:lightblue;
                }
            </style>
        <![endif]-->
        
        <!--[if lt IE 8]>
        <script type="text/javascript">
            alert("您的浏览器Out了，请下载更新。");
        </script>
        <![endif]-->
    
    
        <!--[if gt IE 6]>
            <h2 id="大于IE-版本的浏览器">大于IE6版本的浏览器</h2>
        <![endif]-->

Effect ：

IE8

chrome

##ie6

1.6.2. In-style attribute notation method

Add special characters before the attribute name or after the value of the CSS style to allow different browsers to parse it.

http://browserhacks.com/Online query, this is a powerful website that provides various targeted compatibility methods, which is very practical.

“-″下划线是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

这里以IE6双边距问题为例。

代码：

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            #p1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;        
                margin-left: 100px;
                _margin-left: 50px;        
            }
        </style>
    
    
        <p></p>

效果：

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速查表》：

nbsp;html>

    <meta>
    <title>hack速查表</title>
    <style>
        /*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 &#39;cellspacing="0"&#39; 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>


    <h1 id="hack速查表">hack速查表</h1>
    <p>
        </p><p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>
        <p>以下是我总结的HACK书写方法:</p>
        <p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>
        <p>测试环境：windows系统;</p>
        <p>DOCTYPE:
            nbsp;html>.</p>

标志符	示例	IE6	IE7	IE8	IE9	FF	OP	SA	CH
*	.eq {*color:#000;}	Y	Y	N	N	N	N	N	N
_	.eq {_color:#000;}	Y	N	N	N	N	N	N	N
+	.eq {+color:#000;}	Y	Y	N	N	N	N	N	N
-	.eq {-color:#000;}	Y	N	N	N	N	N	N	N
>	.eq {>color:#000;}	Y	Y	N	N	N	N	N	N
\0	.eq {color:#000\0;}	N	N	Y	Y	N	Y	N	N
\9	.eq {color:#000\9;}	Y	Y	Y	Y	N	N	N	N
\9\0	.eq {color:#000\0;}	N	N	N\Y	Y	N	N	N	N
:root .xx{xxx:xxx\9;}	:root .eq {color:#a00\9;}	N	N	N	Y	N	N	N	N
*+	.eq {*+color:#000;}	Y	Y	N	N	N	N	N	N
*-	.eq {*-color:#000;}	Y	N	N	N	N	N	N	N
*html	*html .eq {color:#000;}	Y	N	N	N	N	N	N	N
*+html	*+html .eq {color:#000;}	N	Y	N	N	N	N	N	N
html*	html* .eq {color:#000;}	Y	Y	N	N	N	N	N	N
[;	.eq {color:red;[;color:blue;}	Y	Y	N	N	N	N	Y	Y
html>body	html>body .eq {color:blue;}	N	Y	Y	Y	Y	Y	Y	Y
html>/**/body	html>/**/body .eq {color:blue;}	N	N	Y	Y	Y	Y	Y	Y
html/**/>body	html/**/>body .eq {color:blue;}	N	Y	Y	Y	Y	Y	Y	Y
@media all and (min-width:0px){}	@media all and (min-width:0px){.eq {color:#000;}}	N	N	N	Y	Y	Y	Y	Y
*:first-child+html	*:first-child+html .eq {color:blue;}	N	Y	N	N	N	N	N	N
:first-child+html{} html	:first-child+html{} html .eq {color:blue;}	Y	N	N	N	N	N	N	N
@-moz-document url-prefix(){}	@-moz-document url-prefix(){ .eq {color:blue;}}	N	N	N	N	Y	N	N	N
@media screen and (-webkit-min-device-pixel-ratio:0){}	@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}	N	N	N	N	N	N	Y	Y
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}	@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}	N	N	N	N	N	Y	N	N
body:nth-of-type(1)	body:nth-of-type(1) .eq {color:blue;}	N	N	N	Y	Y	Y	Y	Y
标志符	示例	IE6	IE7	IE8	IE9	FF	OP	SA	CH

FF:firefox; OP:opera; SA:safari; CH:chrome; Y代表支持，N代表不支持。

注意事项：

·
由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。
·
[;此种方式会影响后续样式，不可取。
·
\9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。
·
当同时出现\0;*;_;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。

推荐写法：

demo:

        .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专属*/

示例：

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            @media screen\0 {
                body {
                    background: lightblue;
                }
            }
        </style>

运行结果：

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

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

<meta>
<meta>
<meta>
<meta>//最新IE

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

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

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

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

<meta>
<meta>

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

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

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

nbsp;html>

    
        <meta>
        <title>X-UA-Compatible</title>
        <style>
            #p1 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;
                margin-left: 100px;
                _margin-left: 50px;
            }
        </style>
    
    
        <p></p>

运行结果：

强制指定文档模式为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、或特定对象。

示例：

nbsp;html>

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

效果：