浏览器兼容性处理小技巧随手记系列(一)
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() 去调用,两种均返回的是"当前年份"。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律