`
北极的。鱼
  • 浏览: 159012 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于CSS hack。自己的理解

    博客分类：
  • CSS
CSSIE浏览器HTML 
阅读更多

关于css hack，主要涉及的就是IE6,IE7,IE8以及严格按照W3C标准执行的浏览器之间的区别。

以下是本人自己的测试结果。（没测试IE7）

测试代码：

<html>
<head>
<style type="text/css">
    *{font-size:30px}
    /*test1*/
    div{border:2px solid red!important;*border:2px solid blue;_border:2px solid green}
    
    /*test2*/
    #box div{color:pink}
    .a{color:yellow}
    .b{color:green!important}
</style>
</head>
<body>

<!--test1-->
<div style="height:200px;width:200px">
hello
</div>
<!--test1-->

<!--test2-->
<div id ="box">
    <div class="a">testOne</div>
    <div class="b">testTwo</div>
</div>
<!--test2-->
</body>
</html>

 

总结：

1.关于"*rule;"以及"_rule;"

    这条样式规则适用于IE6,8，但不支持FF。

2.关于"!important"

    这条样式规则适用于IE和FF。但是在解释的时候有差别。在FF下，很容易理解，就是将加了这个属性的规则优先被浏览器识别。而对于同一属性的不同的class样式块定义的优先级，在IE和FF下都能被正确解释。具体看代码。test1（把_border:2px solid green去掉）的演示说明,IE在为同一元素的CSS代码块中，可以用！important来提升样式的优先级。test2的演示说明，!important对一个良好（或称标准）的浏览器来说，不仅仅是从顺序上提升代码的优先级，还可以用来提升class的优先级，但是IE对于前者是不支持的。

 

 

 

 

 

 

 

分享到：
| 关于ExtJS中的编码问题。
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css_hack csshack技术

    通过理解和掌握这些Hack技术，可以大大提高Web项目的兼容性和用户体验。当然，随着Web标准的发展和浏览器技术的进步，我们还应该关注新的解决方案和技术趋势，以便更好地应对未来可能出现的新挑战。

    CSS hack技巧大全

    了解这些基础后，我们可以结合实例来理解如何使用CSS Hack： **Hack应用情境（一）** 这是一个用于处理IE6、IE7、IE8之间兼容性的例子。通过`\9`和`+`，我们可以逐步分离各个浏览器： ```css .bb{ height:32px; ...

    H5 CSS hack 和浏览器内核

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

    CSS Hack 浏览器兼容文档

    不过，需要注意的是，尽量避免过度依赖CSS Hack，因为它们可能使代码变得难以理解和维护。更好的解决方案是采用渐进增强或优雅降级策略，以及利用条件注释、CSS前缀和现代CSS特性，以确保代码的可维护性和跨浏览器...

    css hack,escape from css hack

    9. **学习和理解盒模型**：理解不同浏览器如何处理盒模型（content-box vs border-box）是避免hack的关键。 10. **代码管理和版本控制**：使用版本控制系统（如Git）和模块化CSS（如BEM、SMACSS等方法论）可以帮助...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页布局和样式的语言。然而，由于不同浏览器之间的解析差异，...因此，花时间研究和理解这些CSS Hack，能够帮助开发者更好地应对各种浏览器环境下的挑战。

    CSS hack-CSS

    使用CSS Hack虽然能解决浏览器兼容性问题，但也可能引入维护难题，因为它们会使CSS代码变得复杂且难以理解。随着浏览器对CSS规范的不断改进和更新，开发者应尽量避免使用Hack，转而采用更现代的解决方案，如条件注释...

    CSS Hack是什么

    ### CSS Hack详解 #### 一、CSS Hack的概念与原理 **CSS Hack**是一种技术手段，用于解决不同浏览器间兼容性问题。由于各种浏览器对CSS的支持程度不同，导致相同的CSS代码在不同浏览器上呈现的效果可能存在差异。...

    区别不同浏览器CSS hack

    接下来，我们通过具体的示例来进一步理解这些特性，并展示如何使用这些Hack来为不同浏览器提供定制化的样式。 ##### 示例1：针对IE6和IE7的Hack ```css background:orange; *background:blue; ``` 在这个例子中，...

    各种类型 CSSHACK

    ### 各种类型 CSS Hack：理解与应用 在网页设计与开发领域，兼容性问题一直是一大挑战。不同浏览器对CSS的支持程度不一，导致同样的代码在不同的浏览器中可能呈现出截然不同的效果。为了确保网站在多种浏览器下都能...

    csshack最新的css作品展示

    【CSS Hack】是一种在网页设计中，为了应对不同的浏览器对CSS（层叠样式表）解析方式的差异，而采用的一些技巧...理解并熟练掌握各种Hack，结合现代前端开发工具和最佳实践，能够有效地提升网站在多平台上的用户体验。

    Css hack总结及其最佳用法

    首先，我们需要理解为何需要CSS Hack。不同的浏览器对CSS规范的实现可能存在差异，尤其是较早版本的Internet Explorer（如6、7和8）在CSS解析上有着独特的理解和执行方式。这些差异可能导致在某些浏览器中样式显示不...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    在网页设计和开发中，浏览器兼容性是一个至关重要的问题，特别是对于那些需要广泛支持不同...尽管随着技术的发展，直接使用hack的情况越来越少，但理解这些技巧仍然是解决历史遗留问题和确保老用户支持的重要技能。

    巧用 UserAgent 代替拙劣的 CSS hack

    标题“巧用 UserAgent 代替拙劣的 CSS hack”指出了一种避免使用CSS hack，转而利用UserAgent来实现特定浏览器兼容性的方法。CSS hack常常导致代码可维护性下降，而通过UserAgent判断，我们可以更加优雅地处理浏览器...

    web前端规范之CSSHack.pdf

    **CSS Hack背景与浏览器阵型** CSS Hack的产生源于不同浏览器对CSS标准解析的不一致。在过去的几年中，浏览器市场主要分为两大阵营：IE阵型...然而，在处理老旧浏览器的项目时，理解并熟练运用CSS Hack仍然至关重要。

    各主流浏览器CSS HACK列表

    通过对CSS Hack的理解和应用，我们可以有效地解决跨浏览器兼容性问题，确保网页在不同浏览器中的一致性和美观性。但需要注意的是，在使用CSS Hack时要适度，避免过度依赖而增加维护成本。此外，随着现代浏览器的普及...

    各浏览器的cssHack总结

    综上所述，理解并掌握各种CSS Hack对于解决浏览器兼容性问题至关重要。不过，随着浏览器对CSS规范的不断改进和统一，尽量避免使用Hack，而是依靠标准方法和工具来创建跨浏览器兼容的网站。在实践中，应持续关注新的...

    CSS hack浏览器兼容一览表

    在网页设计和开发中，CSS（层叠样式表）是用于控制页面布局和样式的语言。然而，不同的浏览器对CSS的...随着技术的发展，理解并熟练运用CSS标准以及合理地规划和编写代码，才是确保网页在各种浏览器上正常显示的关键。

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例，帮助开发者更好地理解并应用这些技巧。 ### 1. 区别IE和非IE浏览器 对于需要在IE与非IE浏览器之间进行样式区分的情况，可以使用以下Hack： ```css #div...

Magicbox
Global site tag (gtag.js) - Google Analytics