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
为了调试尼玛的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
发表评论
-
jquery仿凡客诚品图文切换效果
2012-12-29 22:31 988前端开发过程中需要不断学习,不断温习。最近计划白天继续温习jq ... -
初识javascript美术馆
2012-11-24 12:55 656不断学习,对前端开发来说很是重要,况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 698现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 736习惯性的早起,星期天睡不着啊,估计这个是前端开发的职业病,落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1095jquery博客之前代码插件好好的,最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 783有时候,我们的css样式表中字体乱码,很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH(swf文件)的html代码
2012-10-26 09:44 859记得jquery博客从学校出来,走上这条前端开发这不归路,就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 762jquery博客继续折腾shopex纠结了,老是出现无法安装, ... -
jquery简单attr用法
2012-10-24 11:39 817之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 943又是一个周末,jquery特效继续折腾我那discuz论坛,我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 700战斗月,7月即将结束,回首望去,jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 877今天晚上是jquery博客连续加班的最后一个晚上了,明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 644jquery特效对seo优化了解的不多,只是一些瞎折腾,今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 720前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 720自动为文件添加 utf-8 编码 为了避免编码问题,你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 611jquery特效之前只是用,有些东西没有深入追究。惭愧,好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 613jquery博客这两天在看原生的javascript,看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 595jquery博客最近在看原生javascript,是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 658今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 707隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ...
相关推荐
针对样式属性的浏览器兼容性,我们也可以采用特定的hack方法。例如,`_color`是IE6独有的,而`+color`结合`!`的写法可以用于IE7,`color:\9;`是IE8的一个特性,其他浏览器如Firefox无法识别。此外,`*`前缀的样式...
在网页设计和开发中,CSS(层叠...总之,CSS hack是解决跨浏览器兼容性问题的一种方法,但并非长久之计。随着技术的发展,理解并熟练运用CSS标准以及合理地规划和编写代码,才是确保网页在各种浏览器上正常显示的关键。
解决浏览器兼容性问题的一种主要方法是CSS Hack。CSS Hack是指针对不同浏览器编写特定的CSS代码,使同一段CSS在各个浏览器中都能得到预期的效果。例如,IE6能识别下划线 "_" 和星号 " * ",而IE7仅识别星号,Firefox...
总的来说,H5 CSS Hack是解决浏览器兼容性问题的重要手段,通过理解和灵活运用各种Hack方法,可以确保网页在不同浏览器上呈现出一致的视觉效果。随着浏览器对新标准支持的逐步完善,虽然CSS Hack的重要性正在减弱,...
还可以使用在线工具,如Can I Use,来查看CSS特性的浏览器兼容性信息。 在编写CSS时,理解并应用以上知识点,能够有效提升代码的兼容性和可维护性。同时,持续关注CSS规范的发展和浏览器的更新,以便及时调整和优化...
尽管CSS Hack可以在一定程度上解决浏览器兼容性问题,但这种方法并不总是最佳实践。优先考虑使用标准的CSS语法和遵循W3C规范,以确保代码的可维护性和跨浏览器的兼容性。只有在确实无法通过改进HTML结构或CSS编写...
CSS Hack 是一种有效的工具,可以帮助开发者解决跨浏览器兼容性问题。通过理解和掌握这些Hack技术,可以大大提高Web项目的兼容性和用户体验。当然,随着Web标准的发展和浏览器技术的进步,我们还应该关注新的解决...
CSS Hack,作为一种应对不同浏览器间样式解析差异的技术,是前端开发者在处理跨浏览器兼容性问题时经常需要用到的技能。在本文中,我们将深入探讨CSS Hack的原理、常见方法以及最佳实践,特别关注针对IE6、IE7和IE8...
### 浏览器兼容性解决方法:深入解析与实践技巧 在Web开发中,确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息,深入探讨浏览器兼容性的解决方法,尤其针对Firefox、IE等主流浏览器进行...
### div+css布局时的浏览器兼容问题 ...通过以上知识点的学习,我们可以更好地理解在使用div+css布局时可能会遇到的浏览器兼容性问题,并掌握相应的解决策略。这对于提高网站的可用性和用户体验非常重要。
在Web开发中,CSS浏览器兼容性问题是一个常见且棘手的话题。不同的浏览器,尤其是IE系列与其他现代浏览器(如Firefox、Chrome、Safari和Opera),在解析CSS规则时可能存在差异,导致页面显示效果不一致。以下是一些...
在编写CSS时,我们需要按照浏览器优先级从低到高添加这些前缀,并在最后加上无前缀的标准写法,确保最大范围的浏览器兼容性。 第三,**CSS Hack**是一种直接针对特定浏览器或其版本编写特定CSS代码的方法。例如,...
总的来说,CSS Hack是一种应对浏览器兼容性问题的策略,但应谨慎使用,因为它们可能使代码变得难以维护,并可能导致未来的兼容性问题。随着现代浏览器对CSS标准支持的提升,推荐使用Feature Detection(特性检测)和...
**技术要点:** CSS提示(Tooltip)是一种常见的用户体验增强工具,可以通过CSS实现跨浏览器兼容的提示效果。 **示例代码:** ```css a:hover { background: #ffffff; /* 背景色对IE6来说是必须的 */ text-...
### IE6、IE7、Firefox之间的兼容写法详解 #### 一、引言 随着Web技术的不断发展,浏览器兼容性问题一直是前端开发人员面临的重要挑战之一。尤其在早期的Web开发过程中,不同版本的Internet Explorer(简称IE)...
在前端开发中,获取CSS样式是一项基础且重要的任务,它涉及到浏览器兼容性和各种不同方法的运用。本篇文章将深入探讨如何在不同的环境下有效地获取CSS样式,确保代码在各种浏览器上都能正常工作。 首先,让我们从...
标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...
虽然和大家在一起学习各浏览器的Hack的写法,但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西,我力求处理浏览器兼容,尽量不使用Hack写法来处理,除非实在没有办法的情况下,再加以使用。...