IE浏览器兼容性技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/NotBad_/article/details/52057439

1. 第一行 增加 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

此标示浏览器用什么HTML标准对内容进行解析

2. 在head里面增加 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

对于IE浏览器，使用最新的浏览器模式浏览内容。

一、关于base标签的使用
Base标签是为页面上的所有链接规定默认地址或默认目标，但base标签在IE浏览器的使用上需要特殊注意，其作用范围与其他浏览器（chrome、firefox等）不同，在其他浏览器中其作用域是整个页面，而在IE中，只对第一个引入的资源生效，例如页面引入资源如下：
<base href="${CONTEXT_PATH}/" />
<link rel="stylesheet" type="text/css" href="scripts/pagelayout/layout-default-latest.css" />
<link rel="stylesheet" href="scripts/jquery-ui/development-bundle/themes/ui-lightness/jquery.ui.all.css">
在上面的示例代码中，layout-default-latest.css资源可被正常引入，而jquery.ui.all.css资源无法正常引入。通过网上查找相关资料，问题定位为IE的页面快速渲染机制存在bug，该问题可以通过升级包（KB974455）进行修复。或者在引入资源前都加入base标签来解决。
<base href="${CONTEXT_PATH}/" />
<link rel="stylesheet" type="text/css" href="scripts/pagelayout/layout-default-latest.css" />
<base href="${CONTEXT_PATH}/" />
<link rel="stylesheet" href="scripts/jquery-ui/development-bundle/themes/ui-lightness/jquery.ui.all.css">
由于每次都追加base标签比较繁琐，而且在js中也无法引入，最终采用request中加入上下文信息供资源引入时使用。方式如下：
<link id="jQueryCss" rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/scripts/pagelayout/layout-default-latest.css" />
<link rel="stylesheet" href="${CONTEXT_PATH}/scripts/jquery-ui/development-bundle/themes/ui-lightness/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/scripts/formValidationEngine/css/validationEngine.jquery.css" />
二、关于换肤js使用方式
换肤实现机制是动态加载不同样式文件进行渲染来达到换肤的效果。通用的皮肤切换方式是将原有样式文件替换，再将新的样式文件append到head上，基于jQuery的实现方式如下：
var href = "${CONTEXT_PATH}/scripts/jquery-ui/development-bundle/themes/" + theme + "/jquery.ui.all.css";
$('#jQueryCss').remove();
$('head').append('<link id="jQueryCss" href="' + href + '" rel="Stylesheet" type="text/css" />');
但是此方式在IE上无法达到换肤的效果，需要使用如下方式来强制让IE进行页面渲染：
var href = "${CONTEXT_PATH}/scripts/jquery-ui/development-bundle/themes/" + theme + "/jquery.ui.all.css";
$(#jQueryCss).attr("type","");
$(#jQueryCss).attr("href", href);
$(#jQueryCss).attr("type","text/css");
三、jQuery获取颜色值：
在使用jQuery(“#colorId”).css(“color”)取值时，不同的浏览器或版本获取到的颜色值会不同，有些浏览器获取到的颜色值时#9c9ef（16进制格式），有些浏览器则返回rgb(x,x,x)类。如需求需要获取到16进制颜色值，可通过浏览器版本判断来对rgb类颜色值进行转换，转换函数如下RGB2Hex('rgb(151, 203, 255)' )：
function RGB2Hex(rgb){
  var re = rgb.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");//利用正则表达式去掉多余的部分 
  var hexColor = "#";
  var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  for (var i = 0; i < 3; i++) {
    var r = null;
    var c = re[i];
    var hexAr = [];
    while (c > 16) {
      r = c % 16;
      c = (c / 16) >> 0;
      hexAr.push(hex[r]);
    }
    hexAr.push(hex[c]);
    hexColor += hexAr.reverse().join('');
  }
  return hexColor;
}

有关浏览器兼容问题