处理浏览器兼容所遇到的问题总结(一)

注意:因为浏览器问题,重新定义Array.prototype.indexOf…等函数时,一定要注意符合原始定义,不要随便用别的实现方式定义,否则可能会影响插件调用

之前开发项目时,前端调试都是以google chrome浏览器为准,现需处理浏览器兼容问题,现将遇到的问题总结如下:

一. firefox 浏览器div下的table无水平滑动条

<div id="tableContainer" style="height:420px;width:100%;"  class="table-responsive">
id="demoTable"class="table table-condensed table-bordered" style="width:1650px;">

原因:bootstrap中添加了样式

.table{max-width:100%;}

解决方法:去掉table中的table类属性。

二. IE下无法用AJAX表单上传文件

解决方法:(1)用form表单post提交上传文件
(2)将
替换为

<meta http-equiv="X-UA-Compatible" content="IE=7" /> 

无论页面是否包含 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=8" /> 

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

<meta http-equiv="X-UA-Compatible" content="edge" /> 

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。

参考文章:http://blog.csdn.net/xyr05288/article/details/51657706

三. 问题:当点击屏幕下方的按钮,按钮点击事件处理后,屏幕滑动条会跳回顶部,导致不能及时看到处理结果,要看到结果还是要将滑动条重新拉至下方。

解决方法:(1)在鼠标点击按钮后,先获取屏幕当前滑动条的位置

// 由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题

g_beforeClickScrollTop = document.body.scrollTop + document.documentElement.scrollTop;

(2)之后在点击事件处理完毕后,使用之前保存的位置将滑动条的位置恢复至点击时的位置。

//20160615 屏幕滑动条 回到点击圆圈按钮时的位置 如果不加此语句 统计图加载完后 屏幕滚动条会上移至顶部

document.body.scrollTop = g_beforeClickScrollTop;
document.documentElement.scrollTop = g_beforeClickScrollTop;

处理时出现了 chrome浏览器只支持document.body.scrollTop,而IE和firefox只支持
document.documentElement.scrollTop的情况,以上的处理方法是对这三个浏览器兼容的。

详见http://blog.csdn.net/xyr05288/article/details/51680048

四. IE浏览器在 a href中有中文参数时,显示乱码,firefox和chrome浏览器显示正常

之前代码
thymeleaf

"${'project/aaaaaaa?id='+item.id +'&name=' + item.name }" th:text="${item.name}" title="点击进入" target="_blank">

javascript:

'
'

更改后代码
thymeleaf

"@{project/aaaaaaa(id = ${item.id},                name = ${item.name})}" th:text="${item.name}" title="点击进入" target="_blank">

@{…}链接url的表达式。th:href="@{/xxx/aa.do(id=${o.id})",会自动进行url-encoding的处理。@{…}内部可以是需要计算的表达式,比如:

th:href=”@{'/details/'+${user.login}(orderId=${o.id})}"

javascript:

'
'

详见http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html

五. IE浏览器无法识别jquery的$对象

原因: 今天在用jQuery实现web上面的一个删除功能的时候,发现通过chrome删除完全正常,但是在eclipse的内置浏览器中却不能删除,感觉有些莫名其妙,找了半天原因。
后面发现:
1、eclipse中的内置浏览器实际上调用的是系统中的ie,然后我在ie中测试了一下,果然如此,和eclipse内置浏览器中显示的一样,不能删除;
2、我的ie浏览器是ie8,然而我用的jQuery确实2.0版本的,jQuery从2.0版开始不再支持IE6、IE7和IE8,这就是问题所在;
3、将jQuery版本换成2.0版本以下,问题解决。

解决方案:根据不同的浏览器加载不同版本的jquery

//方式一

 <script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js"
            th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}">script>
 

  
 <script src="../../static/jquery/1.11.0/jquery-1.11.0.min.js"
            th:src="@{/jquery/1.11.0/jquery-1.11.0.min.js}">script>
 

//方式二
<script language="javascript"> 
if(navigator.appName == "Microsoft Internet Explorer") 
{ 
   if(navigator.appVersion.match(/7./i)=='7.') 
   { 
  //是IE7,不加载dojo.js 
   }else{ 
     //加载dojo.js 
  document.write("
                    
                    

你可能感兴趣的:(浏览器兼容)

' + e.name + '">' + e.id + '&name=' + e.name + '" title="点击进入项目雷达" target="_blank">' + e.name + ' ' + e.name + '">' + e.id + '&name=' + encodeURI(e.name) + '" title="点击进入项目雷达" target="_blank">' + e.name + '