时间戳

首页 > 技术文章 > 浏览器兼容问题【整理】

浏览器兼容问题【整理】

Sherries 2021-04-14 10:22 原文

meta标签

 

<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"/>

 

X-UA-Compatible：是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7 的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：<meta http-equiv="X-UA-Compatible" content="IE=7" />这样我们才能使得页面在IE8里面表现正常！

IE=6/7/8.... 指定特定版本内核

IE=edge： Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。

chrome=1：如果有装chrome就使用chrome的内核。使用以下代码强制 IE 使用 Chrome Frame 渲染<meta http-equiv="X-UA-Compatible" content="chrome=1">

 Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。

 

 

浏览器类型：

  较为常用的有： Chrome，Frirefox，Safari，Edge，IE6-11、360安全、360急速。
  其他：qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……

浏览器内核：
  浏览器内核可分为两部分：渲染引擎、JS引擎
  Trident(IE内核)、Gecko(Firefox 内核)、Blink、Webkit(谷歌、safar、opera)

 

各常用浏览器所使用的内核
  1、IE浏览器内核：Trident内核，也是俗称的IE内核；
  2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  4、Safari浏览器内核：Webkit内核；
  5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
  6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
  7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
  8、百度浏览器、世界之窗内核：IE内核；
  9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

 

css样式初始化（预设）

  可以自己写也可以引入类库，Normalize.css 。

*{margin:0;padding:0;}
body,html{
   -webkit-box-sizing: border-box; /* Safari/Chrome 等 WebKit 内核浏览器 */
   -moz-box-sizing: border-box; /* Firefox 等 Gecko 内核浏览器 */
   box-sizing: border-box;   
}

 

浏览器私有属性（浏览器前缀）

    -webkit- 代表chrome、safari私有属性
    -moz- 代表firefox浏览器私有属性
    -ms- IE 浏览器（但不总是 IE）
    -o- 代表opera私有属性
    注意顺序、标准写法要放在最后

 

CSS hark - 针对不同版本浏览器

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

1.属性前缀法(即类内部Hack)：属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀

　　selector{<hack>?property:value<hack>?;}

/* IE6 能识别下划线""和星号" * " */
 _color: blue;
 
/* IE6, IE7 */
 *color: blue; /* 或 #color: blue */
 
/* 除 IE6 外任何浏览器 */
 color/**/: blue;
 
/* IE6, IE7, IE8【IE6~IE10都认识"\9"，但firefox前述三个都不能认识】 */
 color: blue\9;
 
/* IE7, IE8 */
 color/*\**/: blue\9;
 
/* IE6, IE7 -- 作为 !important 使用 */
 color: blue !ie; /*  !后面的字串可以为任意字串 */


2.选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

　　<hack> selector{ sRules }

 

　　常见的选择符级hack有

 

　　*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有效

* html .test { color: #666; } /* IE6 以下 */
* + html .test { color: #ff0; } /* IE7 */
*:first-child + html .test { color: red; } /* IE7 */
　html > body .test { color: #666; } /* IE7、火狐、saf、Opera */ 
html >/**/body .test { color: pink; } /* IE8、火狐、Saf、Opera（除IE6、7外任何浏览器） */
html:first-child .test { color: #666; } /* Opera 9.27以下，saf 2 */
html[xmlns*=''] body:last-child .test { color: #ff0; } /* saf 2-3 */
html[xmlns*='']:root .test { color: #ff0; } /* saf 2-3 */
body:nth-of-type(1) .test { color: pink; } /* 谷歌 1+、火狐 3.5+、Saf 3+、Opera 9+ */
:root *> .test { color: #ff0; } /* 除IE8 外任何浏览器 */
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}
 
/* iPhone / webkit 内核移动端 */
@media screen and (max-device-width: 480px) {}


3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：

　　<!--[if <keywords>? IE <version>?]> 代码块，可以是html，css，js   <![endif]-->

　　keywords

　　if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

　　是否：指定是否IE或IE某个版本。关键字：空

　　大于：选择大于指定版本的IE版本。关键字：gt（greater than）

　　大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

　　小于：选择小于指定版本的IE版本。关键字：lt（less than）

　　小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

　　非指定版本：选择除指定版本外的所有IE版本。关键字：!

　　version：IE浏览器版本，如6、7、8 ；IE10及以上版本已将条件注释特性移除，使用时需注意。

<!--[if IE]> 
 　　<p>IE浏览器显示的内容</p> 
　　 <style></style>
<![endif]-->

<!--[if lt IE 9]>
　　<p>只在IE6显示的内容</p>
 　<script src="jquery.min.js"></script> 
<![endif]-->

 

可参考：https://www.jb51.net/css/493362.html

 

4.自动化插件 - autoprefixer

可参考：https://zhuanlan.zhihu.com/p/95162754

 

推荐阅读