文档章节

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

D
 D-dragon
发布于 2014/06/07 17:13
字数 960
阅读 684
收藏 0
点赞 0
评论 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
博文 38
码字总数 36551
作品 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
浏览器兼容问题的处理

1.让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法(http://blog.csdn.net/chenhongwu666/article/details/41513901/) 2.关于让bootstrap3兼容ie8(http://www.cnblogs.com/dayezi/p/470......

IT追寻者
2016/10/10
18
0
Ajax 浏览器跨域访问控制

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

IamOkay
2014/11/20
0
0
CMS内容管理系统--SitePlus+

SitePlus+ V1.0 Dev版!本版本作为开发版CMS内容管理部分已经全部可以使用 SitePlus+是多年的互联企业建站从业经验,结合市场用户的需求,采用可扩展式开发。“即用即按”,每个功能可独立运行的...

子夜听雨U
2014/07/13
1K
0
Css 浏览器兼容性及其其他常见问题

CSS IE10~11 透明滚动条 透明滚动条不占空间,显示时会覆盖内容 IE10~11 输入框多个叉号 点击叉号会清空输入框内容,会覆盖自己定制样式,可能不会富客户端框架的一些事件input::-ms-clear ...

sand_ant
2016/06/21
16
0
CSSOM视图模式(CSSOM View Module)相关整理

2011年8月份,W3C出炉了CSSOM视图模块(CSS Object Model View)草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及...

鱼北子
2012/09/08
0
0
关于IE浏览器版本不兼容的小问题

这是个老生常谈的问题,做前端会经常的遇到的问题,奈何公司没有前端,就只能自己画界面,写样式了。小白表示些的样式在谷歌上,火狐上,360,IE11,IE10都没问题,然后客户说XP系统的360样式...

蚂蚁上树-遥望天空
2016/10/28
13
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql 主从复制中遇到的错误!

。。。。。

万建宁
9分钟前
0
0
DUBBO 详细介绍

摘要: 主要核心部件: Remoting: 网络通信框架,实现了 sync-over-async 和 request-response 消息机制. RPC: 一个远程过程调用的抽象,支持负载均衡、容灾和集群功能 Registry: 服务目录框架...

明理萝
20分钟前
0
1
4 个快速的 Python 编译器 for 2018

简评:Python 和其他的解释型语言一样经常被吐槽性能不行,所以开发人员为了提升性能创建了不少编译器,本文则选取其中的四个做了基准测试。 Python 其实是一种相当快的语言,但它并不像编译...

极光推送
23分钟前
0
0
spring boot注册多个MQ服务器的问题

关于注册到多个MQ源的文章已经有很多了,这里记录一下声明queue的坑; 如果使用注册bean的方式声明queue,会导致声明的queue同时被注册到所有的MQ源上; //如果使用下面的声明方式,que...

placeholder
24分钟前
0
0
Java面试基础篇——第九篇:BIO,NIO,AIO的区别

现在IO模型主要分三类:BIO(同步阻塞IO),NIO(同步非阻塞IO),AIO()。 先来看看BIO。 1. BIO 服务端接受到请求后,要指派或新建一个线程去处理客户端的IO请求,直到收到断开连接的指令。这么做...

developlee的潇洒人生
29分钟前
0
0
@RequestMapping @ResponseBody 和 @RequestBody 用法与区别

1.@RequestMapping 国际惯例先介绍什么是@RequestMapping,@RequestMapping 是一个用来处理请求地址映射的注解,可用于类或方法上。用于类上,表示类中的所有响应请求的方法都是以该地址作为...

特拉仔
31分钟前
1
0
基于 HTML5 结合互联网+ 的 3D 隧道

前言 目前,物资采购和人力成本是隧道业发展的两大瓶颈。比如依靠民间借贷,融资成本很高;采购价格不透明,没有增值税发票;还有项目管控和供应链管理的问题。成本在不断上升,利润在不断下...

xhload3d
33分钟前
0
0
济南小程序热度分析

原文链接:http://www.jnqianle.cn/company/2072.html

tianma3798
34分钟前
1
0
大数据软件

beats 采集 kafka spark hive es grafana zeppelin

ArlenXu
36分钟前
0
0
Mac item2常用快捷键

标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:command + enter 查找:command + f 分屏 水平分屏:command + d 垂直分屏:c...

说回答
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部