彭家二少

2020年3月22日星期日站长/

前端设计 – CSS兼容IE浏览器

今天周末抽空把网站的页面再次优化了一遍，把最近发现的 bug 都仔细清理了。二少一直都是在 Google Chrome 浏览器中调试的，把CSS文件上传虚拟主机后，刷新 Ok。（周末就应该出去浪的！）

完美的页面设计，直到后来我打开了 IE 浏览器！潘多拉的魔盒同时被我打开了，惨不忍睹的页面。 （嗯，周末就应该用来写代码的！）

修改兼容CSS代码时，写篇日志做个记录，后面可能会用到呢，就不用再去找资料了！

WordPress 添加 functions.php 判断

二少是用 WordPress 建的网站，当然先找这方面的资料了，网上的资源就是丰富。

一、针对不同浏览器 body 添加 css

首先要了解 WordPress 提供的判断用户浏览器的全部变量

  1. $is_iphone (boolean) iPhone Safari  
  2. $is_chrome (boolean) 谷歌浏览器  
  3. $is_safari (boolean) Safari 浏览器  
  4. $is_NS4 (boolean) Netscape 浏览器  
  5. $is_opera (boolean) Opera 浏览器  
  6. $is_macIE (boolean) Mac 平台的IE浏览器  
  7. $is_winIE (boolean) Windows 平台的IE浏览器  
  8. $is_gecko (boolean) FireFox 浏览器  
  9. $is_lynx (boolean) Linux 系统中的纯文本浏览器  
  10. $is_IE (boolean) Internet Explorer  

将以下代码添加到 functions.php 文件中

  1. function wizhi_browser_body_class( $classes ) {  
  2.  　　 global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;  
  3.  　　 if($is_lynx) $classes[] = 'lynx';  
  4.  　　 elseif($is_gecko) $classes[] = 'gecko';  
  5.  　　 elseif($is_opera) $classes[] = 'opera';  
  6.  　　 elseif($is_NS4) $classes[] = 'ns4';  
  7.  　　 elseif($is_safari) $classes[] = 'safari';  
  8.  　　 elseif($is_chrome) $classes[] = 'chrome';  
  9.  　　 elseif($is_IE) {  
  10.  　　  　　 $browser = $_SERVER['HTTP_USER_AGENT'];  
  11.  　　  　　 $browser = substr( "$browser", 25, 8);  
  12.  　　 if ($browser == "MSIE 7.0"  ) {  
  13.  　　  　　 $classes[] = 'ie7';  
  14.  　　  　　 $classes[] = 'ie';  
  15.  　　 } elseif ($browser == "MSIE 6.0" ) {  
  16.  　　  　　 $classes[] = 'ie6';  
  17.  　　  　　 $classes[] = 'ie';  
  18.  　　 } elseif ($browser == "MSIE 8.0" ) {  
  19.  　　  　　 $classes[] = 'ie8';  
  20.  　　  　　 $classes[] = 'ie';  
  21.  　　 } elseif ($browser == "MSIE 9.0" ) {  
  22.  　　  　　 $classes[] = 'ie9';  
  23.  　　  　　 $classes[] = 'ie';  
  24.  　　 } else {  
  25.  　　  　　 $classes[] = 'ie';  
  26.  　　  　　 }  
  27.  　　 }  
  28.  　　 else $classes[] = 'unknown';  
  29.  　　 if( $is_iphone ) $classes[] = 'iphone';  
  30.  　　 return $classes;  
  31. }  
  32. add_filter( 'body_class', 'wizhi_browser_body_class' );  

当然你在浏览首页时，body标签就会添加指定的样式，如下所示：

  1. <body class="home blog logged-in safari">   

body中有了当前浏览器的css类，在写css的时候，我们可以这样写，来解决一些兼容性问题，或针对某个浏览器写一些特殊的样式。

  1. .ie6 .tips{display:inline}  
  2. .chrome .tips{color:#333;}  

二、利用 [if lte IE 9] 标签判断 IE 各版本

将以下代码添加到 functions.php 文件中

  1. // 加载 Internet Explorer 特定的样式表  
  2. wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' );  
  3. wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );  
  4.   
  5. // 加载 Html5 Shiv  
  6. wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );  
  7. wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );  

页面头部 header 部分会出现以下注释标签， 其他浏览器会将其作为注释而忽略这些语句，因为他们是IE专门提供的一种语法，如此就能根据不同的IE版本加载对应的CSS或者JS文件了。

  1. <!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  

以下是注释执行判断各 IE 版本

  1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->  
  2. <!--[if IE]> 所有的IE可识别 <![endif]-->  
  3. <!--[if IE 6]> 仅IE6可识别 <![endif]-->  
  4. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->  
  5. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->  
  6. <!--[if IE 7]> 仅IE7可识别 <![endif]-->  
  7. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->  
  8. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->  
  9. <!--[if IE 8]> 仅IE8可识别 <![endif]-->  
  10. <!--[if IE 9]> 仅IE9可识别 <![endif]-->   
项目 范例 说明
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
小于运算符。如果第一个参数小于第二个参数，则返回true。
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
大于运算符。如果第一个参数大于第二个参数，则返回true。
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
AND运算符。如果所有的子表达式计算结果为true，返回true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
OR运算符。返回true，如果子表达式计算结果为true。

以上 IE 注释执行判断适合在IE9以下版本，那么在 IE10 / IE11 / Edge 中会失效，唉 我就是卡在这里一直调用 IE 兼容 CSS失败，查了好久才发现我是Win10系统，浏览器是IE10以上的。

好在官方给了解决方案， 将页面头部 meta 元素渲染模型改为 IE9。

  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">   

使用媒体查询语句+-ms-high-contrast属性

CSS的媒体查询语句(media query)是一种高级的CSS条件语句，它能根据一些属性和属性值计算判断CSS是否可以生效。在这里，我们要使用一个IE10/11独有的属性，它就是-ms-high-contrast，只有IE10/11实现了这个属性，它可以有两个值active或none，使用下面的媒体查询语句：

  1. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {  
  2.   　　  /* IE10+ CSS styles go here */  
  3. }   

火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行判断IE浏览器的效果。

IE6 only：

  1. html .ie6 { property: value; }  

or

  1. html .ie6 { _property: value; }  

IE7 only：

  1. *+html .ie7 { property: value; }  

or

  1. *:first-child+html ie7 { property: value; }  

IE6 and IE7：

  1. @media screen\9 {  
  2.   　　  ie67 { property: value; }  
  3. }  

or

  1. .ie67 { *property: value; }  

IE6，7 and IE8：

  1. @media \0screen\, screen\9 {  
  2.   　　  ie678 { property: value; }  
  3. }  

IE8 only：

  1. html>/**/body .ie8 { property: value; }  

or

  1. @media \0screen {  
  2.   　　  ie8 { property: value; }  
  3. }  

IE8（只在标准模式）：

  1. .ie8 { property/*/: value\9; }  

IE8，9 and IE10：

  1. @media screen\0 {  
  2.   　　  ie8910 { property: value; }  
  3. }  

IE9 only：

  1. @media screen and (min-width:0\0) and (min-resolution: .001dpcm) {  
  2.   　　  /IE9 CSS/  
  3.   　　  .ie9{ property: value; }  
  4. }  

IE9+：

  1. @media screen and (min-width:0\0) and (min-resolution: +72dpi) {  
  2.   　　  /IE9+ CSS/  
  3.   　　  .ie9up { property: value; }  
  4. }  

IE9 and 10：

  1. @media screen and (min-width:0) {  
  2.   　　  .ie910 { property: value; }  
  3. }  

IE10 only：

  1. _:-ms-lang(x), ie10 { property: value; }  

IE10+：

  1. _:-ms-lang(x), ie10up { property: value; }  

or

  1. @media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {  
  2.   　　  .ie10up { property: value; }  
  3. }  

IE11+：

  1. _:-ms-fullscreen, :root .ie11up { property:value; }  

使用Javascript判断浏览器的类型

先用 Javascript 判断是否是IE浏览器，如果是，就在页面的标记上添加一个“ie”的类名：

  1. var ms_ie = false;  
  2. var ua = window.navigator.userAgent;  
  3. var old_ie = ua.indexOf('MSIE ');  
  4. var new_ie = ua.indexOf('Trident/');  
  5. if ((old_ie > -1) || (new_ie > -1)) {  
  6.   　　  ms_ie = true;  
  7.   　　  alert("IE浏览器")  
  8.   　　  }  
  9. if ( ms_ie ) {  
  10.   　　  document.documentElement.className += " ie";  
  11. }  

有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。

  1. .testClass{  
  2.   　　  /*这里写通用的css*/   
  3. }  
  4. .ie .testClass{  
  5.   　　  /*这里写专门针对IE的css*/  
  6. }   

整理资料真心不容易……

The End