【笔记】学校项目开发中所了解的一些浏览器之间的差异

学校的项目告一段落，其中踩了不少坑也学到了一些新知识，这里先分享一下所碰到的一些问题

1、ie，firefox和 chrome 点击对象之间的差异：

　　项目中我做了不少模态框（弹出层），这就涉及到了关闭模态框按钮的点击事件（关闭按钮是bootstrap风格的），因为页面注册的事件太多所以用了事件委托的形式去做，众所周知bootstrap 风格的关闭按钮是这样写的

　　

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>

button 里面内嵌一个用作标识符的标签，而当我捕获目标事件对象(event.target) 的时候在chrome 浏览器就会捕获到内嵌的 span 标签，而在ie 和 firefox 中目标事件对象只会捕获到button 而不是 span。 天！我之前在chrome 做开发的时候为了迁就把id 写给了 span 标签然而到了ie 调试的时候却不生效，苦闷了一个晚上。

　　解决办法是：不用嵌套的span 标签 button 标签里面输入 " × " 这个符号（各大输入法都有）id 绑定在 button标签里。

2、ajax 的缓存问题

　　在服务器调试时总会遇到缓存的问题，这个缓存不仅影响到修改完 js代码后再刷新页面而无法更新修改后的 js代码，更可怕的是在ie 里这种缓存会影响到ajax 请求的数据。

　　例如：当页面加载完成时我们发送一个 ajax请求到后台请求数据，之后我们更新了一条信息也发送同样一条请求刷新页面数据，这两条请求就会视为一样的请求，浏览器知道这两条请求一样后就不会再重新从服务器抓取数据而是只返回前一次请求的数据，达到减少服务器请求这样的一个效果，但是这并不是我想要的。

　　解决办法是：jq 的ajax 有一个 cache 选项，把它设置为false 或者在请求后台的url 最后加一个时间戳，例如：

　　

$.ajax({
url: '/Management/file/ajaxDeleteFile.action?t=' + new Date().getTime,
type: 'POST',
dataType: 'json',
data: "accuid=" + accuid + "&uid=" + uid,
success: function(data){
if (data.code == 100) {
//请求成功后刷新文件列表
depFileListModule.initFileList(curPath,curDepId);
//关闭对话框
s("#drop-file-floor").style.display = 'none';
alert("删除成功");
}else if(data.code == 300) {
//后台状态码为300 表示这个账号在另一个浏览器或终端登录
//返回错误信息并跳转到登陆页
alert(data.message);
window.location.replace("/Management/public/login.action");

}else{
alert("删除失败，遇到未知错误请重试");
}
}
})

　　或者是设置 cache 为false

　　

$.ajax({
url: '/Management/file/ajaxDeleteFile.action',
type: 'POST',
dataType: 'json',
data: "accuid=" + accuid + "&uid=" + uid,
cache: false,
success: function(data){
if (data.code == 100) {
//请求成功后刷新文件列表
depFileListModule.initFileList(curPath,curDepId);
//关闭对话框
s("#drop-file-floor").style.display = 'none';
alert("删除成功");
}else if(data.code == 300) {
//后台状态码为300 表示这个账号在另一个浏览器或终端登录
//返回错误信息并跳转到登陆页
alert(data.message);
window.location.replace("/Management/public/login.action");

}else{
alert("删除失败，遇到未知错误请重试");
}
}
})

　　这里科普一段别人博客写的关于ajax 缓存的解释

　　1:GET访问 浏览器 认为 是等幂的

　　就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]
　　所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果

　　2:POST则 认为是一个 变动性 访问 （浏览器 认为 POST的提交 必定是 有改变的）

　　防止 GET 的 等幂 访问 就在URL后面加上 ？+new Date();，[总之就是使每次访问的URL字符串不一样的]

　　设计WEB页面的时候 也应该遵守这个原则 原文地址：http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324842.html

//------------------ 补充于7-22 ----------------

忽略了一个很重要的问题

3、getComputedStyle 在ie 中引发的问题

不久前看过 getComputedStyle 这个js 获取元素最终样式的方法 原文链接是大神张鑫旭的： http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

所以在学校的项目里面想试一试，因为浏览器的差异，这个函数要兼容ie 需要写成这样

element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)

由此可见这里出现了另外一个方法：currentStyle

此方法是兼容ie 的，但是当一个元素样式没有设置宽度在ie 中会显示为 auto！

这样我们想计算一些值时就很困难了，解决方法有两个：

1、如果你的项目不用兼容低版本的ie （ie9+）

　　那么你可以直接使用getComputedStyle 这个方法，这个方法会返回有值的宽度

2、改用更高兼容性的 offsetWidth 或 clientWidth （当时我真的是眼瞎，竟然用了上面那个那么鸡肋的方法 不过试试新东西也无妨 哈哈）

// --------------------- 补充于2017-10-17 ---------------------

4、firefox 中调用 getComputeStyle 时无法获取 padding 属性

没错又是getComputedStyle 的事，因为浏览器之间的差异在调用这个方法获取元素属性时也会有着差异就像这次

chrome 中：

window.getComputedStyle(elem, null).padding

这里完全可以获取到对应的padding 属性

而firefox 中，可能觉得这样获取padding 有点太抽象化了所以getComputedStyle 方法中并没有padding 这个属性只有如下：



同样 margin 也是一样



而border 则更多



所以为了兼容浏览器请不要简写padding了，border也请写清楚要获取border 的什么内容