今天周末抽空把网站的页面再次优化了一遍,把最近发现的 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. }   

整理资料真心不容易……

0 comments