首先理解什么是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 这一主题进行深入探讨,旨在帮助读者更好地理解和掌握如何处理常见的浏览器兼容性问题。 #### 浏览器兼容性的挑战 随着 Firefox 的兴起和 IE 系列浏览器各自遵循的标准不尽相同,浏览器兼容性...
【标题】"hack一个简单得要死的CSS框架"指的是egoist-hack,这是一款轻量级、易于理解和使用的CSS框架。它旨在简化前端开发者的工作流程,帮助快速构建具有基本样式的网页项目。 【描述】"hack:一个简单得要死的...
进阶篇进一步讲解了CSS的高级技巧,如层叠上下文、CSS Hack处理浏览器兼容性问题、响应式设计的实现,以及CSS3的新特性,如伪类和伪元素、渐变、阴影、旋转、缩放等3D效果。同时,也会介绍如何使用CSS预处理器(如...
本文将深入探讨如何使用CSS Hack来解决这些浏览器的兼容性问题,特别是针对`position: fixed`属性的差异。 `position: fixed`是CSS中的一个定位属性,它使得元素相对于浏览器窗口进行定位,即使在滚动页面时,该...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
【前端项目-hack.zip】是一个压缩包,包含了名为“hack-...总之,“前端项目-hack”提供了快速搭建前端页面的便利,其简单易用的CSS框架能够帮助开发者快速启动项目,同时也需要根据实际需求进行适当的定制和扩展。
这些花园不仅展示了CSS的多样性,也揭示了其背后的逻辑和原则,帮助读者理解如何将简单的HTML结构转化为复杂的网页布局。 书中的核心知识点包括: 1. **选择器和属性**:介绍基本的选择器如类选择器、ID选择器、...
这些新特性极大地丰富了CSS的表现能力,但同时也带来了兼容性挑战,因此理解并灵活运用CSS Hack是优化网站在不同浏览器中表现的关键。在编写CSS时,应始终考虑向后兼容性和逐步增强的原则,确保网站在尽可能多的环境...
解决这个问题的方法包括使用跨浏览器的CSS重置(如 Normalize.css 或 Eric Meyer Reset),使用浏览器前缀(如 `-webkit-`, `-moz-` 等)以及利用CSS hack。 2. **文字排版**:CSS提供了丰富的属性来调整文本的样式...
在CSS3之前,我们通常需要使用图片或者复杂的CSS hack来实现圆角,但这些方法往往效率低下且维护困难。随着CSS3的普及,我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而,有些浏览器可能不支持CSS3...
2. **CSS Hack**:为了实现IE9的兼容性,开发者可能使用了针对IE的特定CSS hack,例如条件注释、特定前缀(如`_property`或`*property`)或者特殊选择器,来修正样式在IE9中的渲染问题。 3. `display`属性:`simple...
8. **实例解析**:章节中很可能会包含一些实际的代码示例,通过创建简单的页面布局,帮助读者理解CSS和DIV的配合使用,如何实现元素的定位、浮动、显示模式等。 9. **练习与实践**:学习CSS+DIV的过程中,实践是必...
- CSS Hack:了解针对特定浏览器的CSS解决方案。 通过《CSS样式教材》的学习,你将能够熟练运用CSS来创建出具有专业水准的网页设计,无论是在桌面端还是移动端,都能确保页面的美观和用户体验。同时,掌握CSS也将...
总的来说,无论是纯JS+CSS还是jQuery+CSS,创建居中显示的遮罩层都需要理解JavaScript的基本语法和DOM操作,熟悉CSS的布局技巧,以及如何处理浏览器兼容性问题。这个压缩包提供的示例可以帮助开发者快速实现这一功能...
- **鲑鱼奶油奶酪**:该作品展示了如何使用简单的CSS属性创造出复杂的视觉效果,通过巧妙地运用颜色、字体、排版等元素,实现了独特的视觉体验。 - **使用JavaScript的作品**:虽然主要关注CSS,但也有一些作品结合...
可能需要使用特定的CSS hack或jQuery插件来实现跨浏览器的兼容性。 5. **选项卡效果**:这个实现可能包含两种效果,文字和图片列表。文字列表可能是指简单的文字链接作为选项卡,而图片列表则可能包括图片和文字的...
本文将详细介绍针对这些浏览器的最简单CSS Hack技巧。 首先,我们要理解CSS Hack的基本原理:通过添加特定的语法结构,使得某个CSS规则只被目标浏览器识别和应用。在IE6、IE7和FF中,这些技巧通常涉及到选择器的...