浏览器兼容性处理小技巧随手记系列(一)
1、css样式:文字本身的大小不兼容解决
问题原因:同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的:IE下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。
解决方案:给文字设定 line-height ,确保所有文字都有默认的 line-height 值,才能确保在不同浏览器下字体所占高度是一致的。这点很重要,在高度上我们不能容忍1px 的差异。
2、给input加readonly,在火狐下仍会出现光标的问题,会被测试认为是bug需要置灰处理。
但是disabled="disabled"又会存在值传不下去的问题,此时给input加上 onfocus = "this.blur()" 即可,input将不会再获取到焦点,类似于disabled效果,但是可以传值下去。
3、initial关键字:用于设置 CSS 属性为它的默认值,可用于任何 HTML 元素上的任何 CSS 属性。但是不支持IE浏览器和Opera 15之前的版本,所以比如你在一个input上设置它的:display:initial; 会显示为一个块级元素;此时需要改为:display:inline; 即可。
4、getYear()方法:在IE8之前返回的是"当前年份",而在谷歌火狐及IE9之后返回的是 "当前年份-1900" 的值。
兼容处理:(1)加上对年份的判断:
var year= new Date().getYear();
year = (year < 1900 ? (1900 + year) : year);
(2)通过 getFullYear()、 getUTCFullYear() 去调用,两种均返回的是"当前年份"。