文档章节

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

D
 D-dragon
发布于 2014/06/07 17:13
字数 960
阅读 718
收藏 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);
});



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




© 著作权归作者所有

共有 人打赏支持
D
粉丝 6
博文 40
码字总数 40536
作品 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
响应式方案调研及前端开发管理思考

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

浩瀚动酷
06/27
0
0
Ajax 浏览器跨域访问控制

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

IamOkay
2014/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

idea 通过jpa自动生成实体类

引入jpa包 打开persistence窗口 右键选择连接数据库 如果数据库没配置,则可以在下图选项中配置 选择好数据库和实体类的生成地址

斩神魂
31分钟前
1
0
tcpdump 命令

TCPDUMP简介 tcpdump 是一个很常用的网络包分析工具,可以用来显示通过网络传输到本系统的 TCP/IP 以及其他网络的数据包。tcpdump 使用 libpcap 库来抓取网络报,这个库在几乎在所有的 Linu...

寰宇01
38分钟前
2
0
软件的Alpha、Beta、RC、GA版本的区别

Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试人员使用。 Beta:也是测试版,这个阶段的版本会一直加入新的功能。在Alpha版之后推出。 RC:(Release Candidate) 顾名思义...

乔老哥
39分钟前
2
0
慢雾安全海贼王:从DApp亡灵军团,细说区块链安全

本文转载自微信公号“万向区块链”,为慢雾安全负责人海贼王在万向区块链实验室举办的2018上海区块链国际周-技术开放日上的演讲速记整理。 这张图总结了智能合约攻防的各个方面,分为两大部分...

万向区块链
45分钟前
13
0
Matlab编程之——卷积神经网络CNN代码解析

卷积神经网络CNN代码解析 deepLearnToolbox-master是一个深度学习matlab包,里面含有很多机器学习算法,如卷积神经网络CNN,深度信念网络DBN,自动编码AutoE ncoder(堆栈SAE,卷积CAE)的作...

酒逢知己千杯少
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部