今天的项目要自定义下拉框的样式,引入了插件,结果出现了火狐兼容问题,想死的说,之前一直不知道是火狐的问题,总想着可能是自己的样式写错了,查了老半天,米错啊啊啊,而且谷歌是正常的,查了以往有用到这个的项目,发现也有这个问题,坑人呐~人家出现了这问题,没事,因为人家并没有破坏整体的视觉效果,我这里就不行了,因用了div去模拟下拉框。
问题:使用placeholder显示input输入框的描述,改变placeholder文字的样式,字体颜色为白色,在谷歌下能正常显示,火狐就不行了,火狐的显示是浅灰色,后来上网查了下,说谷歌跟火狐定义方式不同,要用这两句:
::-webkit-input-placeholder { color:#fff; }
input:-moz-placeholder { color:#fff; }表示我也用了,没用吖,看不出效果,而且用审查元素也看不出,干脆再加个样式,把字体全部弄成大写的,结果还真全是大写了,说明样式应用上了,呼~这回真不知哪里问题了~经过百般纠结加折腾,才知道原来火狐下就这样显示,以往的项目也是这样,显示成浅灰色的,但我这里一个div是正常显示成白色,另外三个input则显示为灰色,设计稿是白色,谷歌也正常显示,所以我要正对火狐,把div里文字的颜色改成浅灰色,但又不能影响谷歌,查了下火狐谷歌的hack,我想说,他俩根本就像一体的,没什么关于他俩的hack,无奈用浏览器检测,$.browser,报错了。。。原来这次用的是jquery1.9版本的,而这个方法已经被剔除,只能找其他方法了,试过好多方法都没用,只有下面这个是可行的
判断浏览器类型:
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
等号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。
检查是否为 IE6:
// Old
if ($.browser.msie && 7 > $.browser.version) {}
// New
if ('undefined' == typeof(document.body.style.maxHeight)) {}
检查是否为 IE 6-8:
if (!$.support.leadingWhitespace) {}