关于IE8与IE9样式兼容性问题
博客专区 > D-dragon 的博客 > 博客详情
关于IE8与IE9样式兼容性问题
D-dragon 发表于4年前
关于IE8与IE9样式兼容性问题
  • 发表于 4年前
  • 阅读 658
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

由于公司要求项目要兼容IE8与IE9,所以本人在使用chrome测试通过以后,不得不在IE平台下测试下。由于本人机子上只有IE9,所以要测试IE8的显示问题时,得利用F12打开浏览器的设置显示模式。

现在的IE浏览器,一般有两种模式:


浏览器模式的主要作用是为兼容较早版本的IE,它会控制浏览器发出的UserAgent,表示以哪个版本的浏览器发出请求,以此来允许为某个特定IE版本设计的代码正确执行(举例来说:有些代码真是判断ie版本的,还有css里也有判断ie版本的)。文档模式的主要作用是影响浏览器显示网页HTML的方式,在接到返回的HTML文件后,决定以哪个IE版本的文档模式解析该页面(举例来说:JS脚本就是依赖文档模式,IE9的js变化就需要IE9文档模式来支持)
文档模式的主要作用是影响浏览器显示网页HTML的方式,在接到返回的HTML文件后,决定以哪个IE版本的文档模式解析该页面(举例来说:JS脚本就是依赖文档模式,IE9的js变化就需要IE9文档模式来支持)

所以起作用的是文档模式,而浏览器模式是用于外部识别用的。也不知怎么回事,本人设置一个span的长度时,chrome下为165px可以对齐;但是在ie8下,需要167px才能对齐;在ie9下,这个数字是162px。

分析了半天,没找到原因可以解释,只能通过ie hack的方式来解决,众所周知,IE8下用width:167px\0,而IE9下用width:162px\9\0;不晓得是不是因为本人本地的IE是IE9的缘故,反正这两个标识,在IE8模式或IE9栻上都能识别。

所以不得以,只能通过判断浏览器的版本来加载不同的CSS文件来解决:

<script type="text/javascript">
var href = '';
if($.browser.msie){
       var version = $.browser.version;
	if(version=="8.0"){
href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie8.css";
	}else if(version=="9.0"){
href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie9.css";
	}
}
$('<link rel="stylesheet" type="text/css" href="' + href +'"/>').appendTo('head');
</script>



注意,上面的判断浏览器的代码是通过JQuery来完成的,所以这段代码要放在JQuery引用文件下面。

最近本人也在思考,有没有方法,使一个页面加载进来以后,默认就采用IE8的文档模式呢(本人的机子上打开网页叶默认用的是IE7的文档模式)。经过本人在网上寻找,终于找到一种方法,可行:

<head>
<title>流程启动页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />



需要注意的是,这个顺序很重要,乱放title与meta元素的顺序的话,这个设置模式是不会起作用的。

以上的方法可能没是最好的,但个人觉得还是比较实用的,所以把它记录下来,以供后续参考。

另外,由于select及其里面的option是动态生成的,所以为了排版整齐,只能事先将select的宽度固定,但这也引出了一个问题,那就是option里面的内容长于select的宽度时,在IE下面,会显示不全,甚至只显示选择文件的第一个字母。这个问题怎么解决?

经过本人的再三测试,发现可以通过在select上面绑定一个change事件,选择option后重新设置一下select的宽度即可解决,大致如下:

$sel.change(function(){
    $(this).width(ieSelectWidth);
});



这段代码很简单,但这个过程却不简单。




  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 37
码字总数 35890
×
D-dragon
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: