`

CSS hack的简单理解

阅读更多
首先理解什么是CSS hack

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。就是所谓的预览器的兼容性

这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线_和星号*,IE7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
比如要分辨IE6和firefox两种浏览器,可以这样写:
<style>   
div{   
    background:red; /* for firefox */   
    *background:blue;  /* for IE6 for IE7*/   
}   
</style>   
<div>我在IE6,IE7中看到是蓝色的,在firefox中看到是红色的。</div>  



解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:blue},于是理所当然这个div的背景是蓝色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

	     
                IE6	IE7	FF
*	        √	√	×
!important	×	√	√


另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

下面10个非常有用的CSS hack和技术
http://www.kuqin.com/webpagedesign/20090619/57725.html

举了几个实例,供参考。
voice-family:”\”}\”";
voice-family:inherit;
property:value; 

 

 

<STYLE type=text/css> 
#test-span { 
voice-family:"\"}\""; 
voice-family:inherit; 
color:green; 
} 
</STYLE> 

p\roperty:value; 

<style type="text/css"> 
#test-span { 
c\olor:green; 
} 
</style> 

/*/*/property:value;/* */ 

<style type="text/css"> 
#test-span { 
/*/*/ color:green; /* */ 
} 
</style> 

/*/*//*/property:value;/* */ 

<style type="text/css"> 
#test-span { 
/*/*//*/ color:green; /* */ 
} 
</style> 

 

 

div#test 

<style type="text/css"> 
span#test-span { 
color:green; 
} 
</style> 

head:first-child body div 

<style type="text/css"> 
head:first-child body #test-span { 
color:green; 
} 
</style>
分享到:
评论

相关推荐

    CSS Hack 经验分享

    本文将围绕 CSS Hack 这一主题进行深入探讨,旨在帮助读者更好地理解和掌握如何处理常见的浏览器兼容性问题。 #### 浏览器兼容性的挑战 随着 Firefox 的兴起和 IE 系列浏览器各自遵循的标准不尽相同,浏览器兼容性...

    hack一个简单得要死的CSS框架

    【标题】"hack一个简单得要死的CSS框架"指的是egoist-hack,这是一款轻量级、易于理解和使用的CSS框架。它旨在简化前端开发者的工作流程,帮助快速构建具有基本样式的网页项目。 【描述】"hack:一个简单得要死的...

    Discuz!7.0CSS手册

    进阶篇进一步讲解了CSS的高级技巧,如层叠上下文、CSS Hack处理浏览器兼容性问题、响应式设计的实现,以及CSS3的新特性,如伪类和伪元素、渐变、阴影、旋转、缩放等3D效果。同时,也会介绍如何使用CSS预处理器(如...

    解决IE6、IE7、Firefox兼容比较简单的CSS Hack

    本文将深入探讨如何使用CSS Hack来解决这些浏览器的兼容性问题,特别是针对`position: fixed`属性的差异。 `position: fixed`是CSS中的一个定位属性,它使得元素相对于浏览器窗口进行定位,即使在滚动页面时,该...

    CSS网站布局实录 (第二版)PDF版

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...

    前端项目-hack.zip

    【前端项目-hack.zip】是一个压缩包,包含了名为“hack-...总之,“前端项目-hack”提供了快速搭建前端页面的便利,其简单易用的CSS框架能够帮助开发者快速启动项目,同时也需要根据实际需求进行适当的定制和扩展。

    非常好的一本書:css禅意花园

    这些花园不仅展示了CSS的多样性,也揭示了其背后的逻辑和原则,帮助读者理解如何将简单的HTML结构转化为复杂的网页布局。 书中的核心知识点包括: 1. **选择器和属性**:介绍基本的选择器如类选择器、ID选择器、...

    【css新增特性思维导图梳理】

    这些新特性极大地丰富了CSS的表现能力,但同时也带来了兼容性挑战,因此理解并灵活运用CSS Hack是优化网站在不同浏览器中表现的关键。在编写CSS时,应始终考虑向后兼容性和逐步增强的原则,确保网站在尽可能多的环境...

    上课用CSS实验总结

    解决这个问题的方法包括使用跨浏览器的CSS重置(如 Normalize.css 或 Eric Meyer Reset),使用浏览器前缀(如 `-webkit-`, `-moz-` 等)以及利用CSS hack。 2. **文字排版**:CSS提供了丰富的属性来调整文本的样式...

    用js实现css3效果的圆角方法

    在CSS3之前,我们通常需要使用图片或者复杂的CSS hack来实现圆角,但这些方法往往效率低下且维护困难。随着CSS3的普及,我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而,有些浏览器可能不支持CSS3...

    simplehint提示信息用css做的兼容性IE9

    2. **CSS Hack**:为了实现IE9的兼容性,开发者可能使用了针对IE的特定CSS hack,例如条件注释、特定前缀(如`_property`或`*property`)或者特殊选择器,来修正样式在IE9中的渲染问题。 3. `display`属性:`simple...

    精通CSS+DIV源码 第一章

    8. **实例解析**:章节中很可能会包含一些实际的代码示例,通过创建简单的页面布局,帮助读者理解CSS和DIV的配合使用,如何实现元素的定位、浮动、显示模式等。 9. **练习与实践**:学习CSS+DIV的过程中,实践是必...

    CSS样式教材

    - CSS Hack:了解针对特定浏览器的CSS解决方案。 通过《CSS样式教材》的学习,你将能够熟练运用CSS来创建出具有专业水准的网页设计,无论是在桌面端还是移动端,都能确保页面的美观和用户体验。同时,掌握CSS也将...

    jquery js css弹出居中的遮罩层

    总的来说,无论是纯JS+CSS还是jQuery+CSS,创建居中显示的遮罩层都需要理解JavaScript的基本语法和DOM操作,熟悉CSS的布局技巧,以及如何处理浏览器兼容性问题。这个压缩包提供的示例可以帮助开发者快速实现这一功能...

    CSS禅意花园最新中文版PDF

    - **鲑鱼奶油奶酪**:该作品展示了如何使用简单的CSS属性创造出复杂的视觉效果,通过巧妙地运用颜色、字体、排版等元素,实现了独特的视觉体验。 - **使用JavaScript的作品**:虽然主要关注CSS,但也有一些作品结合...

    jQuery+div+css选项卡列表样式

    可能需要使用特定的CSS hack或jQuery插件来实现跨浏览器的兼容性。 5. **选项卡效果**:这个实现可能包含两种效果,文字和图片列表。文字列表可能是指简单的文字链接作为选项卡,而图片列表则可能包括图片和文字的...

    IE6、IE7和FF的最简单的hack技巧

    本文将详细介绍针对这些浏览器的最简单CSS Hack技巧。 首先,我们要理解CSS Hack的基本原理:通过添加特定的语法结构,使得某个CSS规则只被目标浏览器识别和应用。在IE6、IE7和FF中,这些技巧通常涉及到选择器的...

Global site tag (gtag.js) - Google Analytics