CSS Hack、JS userAgent

摘要:项目中刚好遇到一个样式问题,win10版本的IE11、Edge跟我win8系统IE11浏览器出现了不同程度的样式差异,假如有一像素偏差吧。实在是没辙了,想单纯用CSS去解决,在不动用JS情况下,找了好久的资料,试了几次,发现国外一个大牛写的不错。就整理下。

HACK:

具体内容自己看比较省事,遇到问题有针对性的去解决。

不过,一开始找到的解决我的问题,在stackoverflow上针对CSS hack的回答一个个找好心累,试了又不一定成功,所以就这么搞了,最终找到一个合适的,没办法,业务的东西,只能用hack。

面整理一个侦测IE的Javascript,目前最高支援到IE12。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function isIEVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// 回傳版本 <=10 的版本
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// 回傳版本 >=11 的版本
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// 判斷Edge
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}

2016.5.27 更新

1
2
3
4
5
6
7
.ui-select-options {
min-width: 85px\0;
}
/*9-11*/
_::selection, .ui-select-options {
min-width: auto\0;
}

处理完后,遇到IE8的下拉问题,接着遇到IE8刷新报错的问题,这个真叫棘手问题。测试开发环境是打包的代码,所有很难找到具体什么原因,只提示一个ECUI.js undefined问题,无奈把测试环境的打包代码都干掉 ,部署本地未打包的源码上去 一个个功能模块去测试,最后,发现是日期组件的问题。只能联系成都的小伙伴看看,叫写组件的看看,确实不是我这边代码问题后,只能修改ECUI.js 做容错处理。

OK,大神就是大神,确定问题后,只能打包构建提测吧,每次总觉得 一到晚上 测试总会给我来个Bug,让我都担心受怕的。这都周五了,我想静静!还指望周末打个球。

早上在修改测试环境的时候,准备把一个文件夹下面的所有文件移到上级目录的时候,因为键盘数字键盘关了,导致 mv * ../ 变成了 mv * /, My Gold,都跑到根目录下了。无奈只能一个个删除咯。

safari浏览器判断:

1
2
3
if (navigator.userAgent.indexOf('Mac OS X') > 0 && navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') < 0) {
// code
}

不判断Chrome的话会跟Mac下安装的Chrome 和 QQ浏览器混淆,因为在Mac下QQ浏览器返回userAgent:

1
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36 QQBrowser/4.0.4035.400"

Chrome在Mac返回的userAgent信息是:

1
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36"

FireFox在Mac下返回的userAgent信息是:

1
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:45.0) Gecko/20100101 Firefox/45.0"

Opera在Mac下返回的userAgent信息是:

1
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36 OPR/36.0.2130.65"

所以判断有没有Chrome这个关键字就能判断是不是Mac下Safari了。

2016.5.27 pm 更新

发现测试人员用了一个软件挺有意思的,SwitchHost 推荐一下。

0%