3个兼容性问题的总结

原创 阿波罗D波 随笔 学习收获 335阅读 2018-01-24 19:57:14 举报

####1,console.log()调试在IE9下(IE9以下浏览器忽略)会阻碍代码执行下去问题
ie9下面,console的代码有时候执行不下去,不过当F12打开控制台的时候代码可以继续执行下去。原因是IE8 与IE9 的console对象只有在打开了调试窗口之后才会被创建。之后的版本才解决了这个问题;
如果出现IE9下面有console.log()阻碍执行,删除console.log()就好了;
假如项目使用环境包括IE8、IE9,想使用console.log(),用if (window.console) { … }包住console.log()就可以了。

####2,苹果safari浏览器下select高度无法设置的问题
select标签在safari浏览器中的高度永远都是默认的,想要控制高度,解决的办法是加上line-height属性就可以设置;
但是加上line-height属性可以设置高度后会发现高度变大了,safari浏览器对select默认上下边距padding各多出3px的高度; 比如设置height:44px;safari下面会变成50px;这样一来,就和别的浏览器无法统一了;
[color=#00b0f0]解决办法:

经过探索发现,safari浏览器有一种特有的写法从未见过:
假如原来的高度是这样的:[/color]
css 代码

#####想要兼容safari浏览器,要加上苹果的特有写法:
css 代码

#####所以最后的写法就是:
css 代码

####3,safari浏览器下input框的placeholder使用line-height不垂直居中的问题
解决方案一:使用padding使提示文字居中;
解决方案二:在height属性后面,添加属性vertical-align: middle;
解决方案三:在height属性后面,添加属性line-height:1px。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复