文档章节

关于IE8与IE9样式兼容性问题

D
 D-dragon
发布于 2014/06/07 17:13
字数 960
阅读 769
收藏 0

由于公司要求项目要兼容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);
});



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




© 著作权归作者所有

共有 人打赏支持
上一篇: ruby tk尝试
D
粉丝 7
博文 44
码字总数 43677
作品 0
资阳
程序员
私信 提问
关于浏览器模式和文本模式的困惑

什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默...

lg2045
2013/07/01
0
0
提高CSS对浏览器的兼容性!不是看你代码有多强,是看你对问题的态度

对于页面的CSS样式,我们开发人员一般只会写一种方式,但一方式很难去适应所有浏览器,或者同一浏览器的各种版本,但如果你要设计一个完美的系统,又必须要去 考虑这个问题,下面是我对CSS样...

mcy247
2017/12/06
0
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
Ajax 浏览器跨域访问控制

jsonp+ajax实现浏览器跨域通信的原理解析 php+ajax+P3P实现多域名跨域登录 一.关于跨域需要设置的响应头消息 二.关于IE8和IE9浏览器差异性说明 IE8和IE9使用新的API XDomainRequest(IE又淘气...

IamOkay
2014/11/20
0
0
响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index20171200...

浩瀚动酷
2018/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

lucene 评分要素解析

基本规则:

Java搬砖工程师
33分钟前
1
0
ubutnu 14.04 安装JIRA

系统版本:Ubuntu 14.04 下载jira安装文件 sudo wget https://downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-7.1.9-x64.bin 修改文件权限 sudo chmod 777 atl......

Kampfer
43分钟前
0
0
软件开发模型优缺点及其适用范围

瀑布模型、快速原型模型、增量模型、螺旋模型 瀑布模型也称软件生存周期模型。 优点: (1)它在软件工程中占有重要地位,它提供了软件开发的基本框架,这比依靠“个人技艺”开发软件好得多。...

无极之岚
43分钟前
0
0
孩子们各显神通对付 iOS 12「屏幕使用时间」的限制

简评:2018 年秋季,苹果公司推出了 iOS 12,其中备受好评的一项改变是:增加了屏幕使用时间限制,以减轻沉迷手机的状况。三个月过去后,这项功能似乎并没有对孩子造成太多困扰,道高一尺魔高...

极光推送
48分钟前
3
1
springCloud Spring Boot mybatis分布式微服务云架构-docker-feign-hystrix-ribbon(七)

简介 在上一节中,我们讨论了feign+hystrix在项目开发中,除了考虑正常的调用之外,负载均衡和故障转移也是关注的重点,这也是feign + ribbon+hystrix的优势所在,本节我们就讨论一下在feign...

sccspuercode
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部