Css hack总结及其最佳用法,告诉你怎么运用hack,无懈可击的解决各个浏览器的样式兼容
CSS HACK总结
在开发页面的过程中,总会遇到这样那样的不兼容问题,在尽量避免使用一些兼容性很差的元素和样式后,往往还有细节上的不兼容问题,追求完美的前端工程师们就要采用css hack来解决问题了。
网上各种css hack资料很多,但是很多是有错误,或者不形象的,今天我来细致形象的总结一下他们,及最万无一失的用法~
所有效果均经过各个浏览器测试
首先 ,将要提及的css hack 有:_,*,\0,\9,\0\9,!important
各个hack的作用:
_ :用于IE6
代码:
1 background-color:blue;
2 _background-color:red;
效果:
*和+:用于IE6,IE7
代码:
1 background-color:blue;
2 *background-color:red;
1 background-color:blue;
2 +background-color:red;
效果都为:
\0:用于IE8,IE9
代码:
1 background-color:blue;
2 background-color:red\0;
效果:
没错,在IE6下 无法识别了~~~
\9:用于 IE6,IE7,IE8,IE9
代码:
1 background-color:blue;
2 background-color:red\9;
效果:
\9\0:用于IE9
代码:
1 background-color:blue;
2 background-color:red\9\0;
效果:
没错IE6,又无法识别了~~~~
!important:用于所有浏览器--不能算做是hack了,不推荐使用哦
代码:
1 div{
2 background-color:red !important;
3 }
4 #test{
5 background-color:blue;
6 }
效果:
加上!important 可以完全无视css优先级了~~~
CSS HACK最佳应用方式
那么该怎么使用css hack ,达到最好的效果----不影响已经符合标准的浏览器样式呢?
对于IE6:
代码
1 background-color:blue;
2 _background-color:red;
如果IE7,IE6同时有问题:
以下2选一:
代码:
1 background-color:blue;
2 *background-color:red;
1 background-color:blue;
2 +background-color:red;
如果只有IE7呢?
代码:
1 background-color:blue;
2 *background-color:red;
3 _background-color:blue;
对于IE8:
代码:
1 background-color:blue;
2 background-color:red\9;
3 *background-color:blue;
4 background-color:blue\9\0;
对于IE9:
代码: 记得恢复IE6~
1 background-color:blue;
2 background-color:red\9\0;
3 _ background-color:blue;
对于整个IE:
1 background-color:blue;
2 background-color:red\9;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂