`
qishuai
  • 浏览: 38603 次
  • 性别: Icon_minigender_1
  • 来自: 南通
社区版块
存档分类
最新评论

CSS Hack 浏览器兼容写法 用法

阅读更多
CSS Hack 不得不在一些项目中运用到。jquery博客也遇上了,关于二次开发的一个3D地图,其实也想好好写代码兼容,苦于上头要东西,短期不可能实现,没法子,回归css hack 吧。
为了调试尼玛的3D地图,不得不安装了IE9,搭配着IEtest方便照顾IE全家。firefox chrome safari opera
Hack 的顺序
一般使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE7 -> 其他
Hack 的用法
说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.
1. 同一文件中处理.
如: id=”bg” 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
#bg {
background:red !important; /* Firefox 等其他浏览器 */
background:blue; /* IE6 */
}
*+html #bg {
background:green !important; /* IE7 */
}
IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.
上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).
2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 尼玛的IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
<!– 放置所有浏览器的样式 –>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<!– 只放置 IE 必须的, 而不能通过 W3C 的代码 –>
<!–[if IE]>
<link rel=”stylesheet” href=”style_ie.css” type=”text/css” />
<![endif]–>
浏览器的 CSS Hack 方法有很多, 比如 @import 引入, > 过滤等等方法, 但以上就是我用过的全部.
页面的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 三天两头的更新,瞧瞧谷歌 火狐都争相的升,真是一个汗字了得。So,我们尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.
最后让我们一起抵制IE6,如果周围朋友客户有用IE6的,亲你看到的话帮忙请升级下。Let’s f u c k IE6,Thanks!

转自 jquery http://www.jqueryba.com/280.html
分享到:
评论

相关推荐

    css浏览器兼容写法

    针对样式属性的浏览器兼容性,我们也可以采用特定的hack方法。例如,`_color`是IE6独有的,而`+color`结合`!`的写法可以用于IE7,`color:\9;`是IE8的一个特性,其他浏览器如Firefox无法识别。此外,`*`前缀的样式...

    CSS hack浏览器兼容一览表

    在网页设计和开发中,CSS(层叠...总之,CSS hack是解决跨浏览器兼容性问题的一种方法,但并非长久之计。随着技术的发展,理解并熟练运用CSS标准以及合理地规划和编写代码,才是确保网页在各种浏览器上正常显示的关键。

    浏览器兼容.doc-CSS hack姐姐兼容性问题

    解决浏览器兼容性问题的一种主要方法是CSS Hack。CSS Hack是指针对不同浏览器编写特定的CSS代码,使同一段CSS在各个浏览器中都能得到预期的效果。例如,IE6能识别下划线 "_" 和星号 " * ",而IE7仅识别星号,Firefox...

    H5 CSS hack 和浏览器内核

    总的来说,H5 CSS Hack是解决浏览器兼容性问题的重要手段,通过理解和灵活运用各种Hack方法,可以确保网页在不同浏览器上呈现出一致的视觉效果。随着浏览器对新标准支持的逐步完善,虽然CSS Hack的重要性正在减弱,...

    各浏览器css兼容写法

    还可以使用在线工具,如Can I Use,来查看CSS特性的浏览器兼容性信息。 在编写CSS时,理解并应用以上知识点,能够有效提升代码的兼容性和可维护性。同时,持续关注CSS规范的发展和浏览器的更新,以便及时调整和优化...

    各浏览器下Hack的写法

    尽管CSS Hack可以在一定程度上解决浏览器兼容性问题,但这种方法并不总是最佳实践。优先考虑使用标准的CSS语法和遵循W3C规范,以确保代码的可维护性和跨浏览器的兼容性。只有在确实无法通过改进HTML结构或CSS编写...

    css_hack csshack技术

    CSS Hack 是一种有效的工具,可以帮助开发者解决跨浏览器兼容性问题。通过理解和掌握这些Hack技术,可以大大提高Web项目的兼容性和用户体验。当然,随着Web标准的发展和浏览器技术的进步,我们还应该关注新的解决...

    Css hack总结及其最佳用法

    CSS Hack,作为一种应对不同浏览器间样式解析差异的技术,是前端开发者在处理跨浏览器兼容性问题时经常需要用到的技能。在本文中,我们将深入探讨CSS Hack的原理、常见方法以及最佳实践,特别关注针对IE6、IE7和IE8...

    浏览器兼容性解决方法

    ### 浏览器兼容性解决方法:深入解析与实践技巧 在Web开发中,确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息,深入探讨浏览器兼容性的解决方法,尤其针对Firefox、IE等主流浏览器进行...

    div+css布局时的浏览器兼容问题

    ### div+css布局时的浏览器兼容问题 ...通过以上知识点的学习,我们可以更好地理解在使用div+css布局时可能会遇到的浏览器兼容性问题,并掌握相应的解决策略。这对于提高网站的可用性和用户体验非常重要。

    最新web面试题css浏览器的兼容性问题.docx

    在Web开发中,CSS浏览器兼容性问题是一个常见且棘手的话题。不同的浏览器,尤其是IE系列与其他现代浏览器(如Firefox、Chrome、Safari和Opera),在解析CSS规则时可能存在差异,导致页面显示效果不一致。以下是一些...

    解决CSS浏览器兼容性问题的4种方案

    在编写CSS时,我们需要按照浏览器优先级从低到高添加这些前缀,并在最后加上无前缀的标准写法,确保最大范围的浏览器兼容性。 第三,**CSS Hack**是一种直接针对特定浏览器或其版本编写特定CSS代码的方法。例如,...

    区分ie6 7 8 FF 的css hack 日常总结

    总的来说,CSS Hack是一种应对浏览器兼容性问题的策略,但应谨慎使用,因为它们可能使代码变得难以维护,并可能导致未来的兼容性问题。随着现代浏览器对CSS标准支持的提升,推荐使用Feature Detection(特性检测)和...

    10个非常有用的CSS hack和技术

    **技术要点:** CSS提示(Tooltip)是一种常见的用户体验增强工具,可以通过CSS实现跨浏览器兼容的提示效果。 **示例代码:** ```css a:hover { background: #ffffff; /* 背景色对IE6来说是必须的 */ text-...

    IE6、IE7、Firefox之间的兼容写法

    ### IE6、IE7、Firefox之间的兼容写法详解 #### 一、引言 随着Web技术的不断发展,浏览器兼容性问题一直是前端开发人员面临的重要挑战之一。尤其在早期的Web开发过程中,不同版本的Internet Explorer(简称IE)...

    获取css样式 兼容写法

    在前端开发中,获取CSS样式是一项基础且重要的任务,它涉及到浏览器兼容性和各种不同方法的运用。本篇文章将深入探讨如何在不同的环境下有效地获取CSS样式,确保代码在各种浏览器上都能正常工作。 首先,让我们从...

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

    浏览器兼容之旅第二站:各浏览器的Hack写法让浏览器达到一致的渲染效果

    虽然和大家在一起学习各浏览器的Hack的写法,但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西,我力求处理浏览器兼容,尽量不使用Hack写法来处理,除非实在没有办法的情况下,再加以使用。...

Global site tag (gtag.js) - Google Analytics