由于公司要求项目要兼容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>
最近本人也在思考，有没有方法，使一个页面加载进来以后，默认就采用IE8的文档模式呢（本人的机子上打开网页叶默认用的是IE7的文档模式）。经过本人在网上寻找，终于找到一种方法，可行：
<head>
<title>流程启动页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
以上的方法可能没是最好的，但个人觉得还是比较实用的，所以把它记录下来，以供后续参考。
另外，由于select及其里面的option是动态生成的，所以为了排版整齐，只能事先将select的宽度固定，但这也引出了一个问题，那就是option里面的内容长于select的宽度时，在IE下面，会显示不全，甚至只显示选择文件的第一个字母。这个问题怎么解决？
经过本人的再三测试，发现可以通过在select上面绑定一个change事件，选择option后重新设置一下select的宽度即可解决，大致如下：
$sel.change(function(){
$(this).width(ieSelectWidth);
});
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
