css hack技术

简介: css hack的定义: css hack由于不同的浏览器,比如:IE6,IE7,Firefox等,对css夫人解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

css hack的定义: css hack由于不同的浏览器,比如:IE6,IE7,Firefox等,对css夫人解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对于不同的浏览器去写不同的css,让它能够同时兼容不同的浏览器,能在不同的浏览器中,也能得到我们想要的页面效果。

 

 

css kack怎样使用: css hack一般是利用浏览器的支持css的能力和bug来进行的。所以对浏览器的选择大致可以分为能力选择和怪癖选择(bug)。能力 通常指的是浏览器对css特性的支持度,而怪癖是指浏览器特有的一些bug.

 

css hack分类: css选择器hack、css属性hack、IE条件注释的hack

1. css 选择器hack: ie6能识别*html .class{},IE7 能识别*+html.class{}或者*:nth-child+html.class{}等

2. css属性hack: 比如IE6能识别下划线“ _ ”和星号" * ",IE7能识别" * ",但是不能识别下划线" _ ",而Firefox两个都不能识别。

3. IE条件注释hack

针对所有的IE: <!--[IF IE]><!-- code--><![endif]-->

针对IE6以及以下版本: <!--[if It IE 7><!--code--><![endif]-->

这类Hack不仅对css生效,对写在判断语句里面的所有的代码都会生效

书写顺序,一般是将识别能力强的浏览器的css写在前面。

 

 

建议: 尽量使用通用方法,减少css hack的使用,大规模的使用css hack会带来维护成本的提高,以及浏览器版本变化而带来类似的hack生效等问题

相关文章
|
2月前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
58 0
|
2月前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
3月前
|
前端开发 UED
不可或缺的前端技术之CSS选择器
CSS选择器是前端开发中不可或缺的技术,它能够通过简洁而强大的语法来选择网页中的元素,并对其进行样式的设置。本文将介绍CSS选择器的基本用法和常见类型,帮助读者更好地掌握前端开发中的样式选择技巧。
11 0
|
3月前
|
前端开发 JavaScript API
2022年CSS生态圈技术趋势!(下)
2022年CSS生态圈技术趋势!(下)
|
3月前
|
前端开发 API C++
2022年CSS生态圈技术趋势!(上)
2022年CSS生态圈技术趋势!
|
4月前
|
存储 前端开发 JavaScript
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
基于前端技术原生HTML、JS、CSS 电子病历编辑器源码
74 0
|
6月前
|
XML 前端开发 JavaScript
CSS3 技术中的数字 3 代表什么含义
CSS3 技术中的数字 3 代表什么含义
60 1
|
7月前
|
前端开发 UED 容器
CSS 相关技术简介
CSS(层叠样式表)是一种用于描述网页内容展示和布局的标记语言。它与 HTML 结合使用,为网页添加样式和美化效果。通过 CSS,我们可以控制文本的字体、颜色、大小,调整元素的边距和边框样式,甚至创建复杂的动画效果。
51 0
|
8月前
|
前端开发 Android开发
利用CSS实现轮播图效果
媒体查询(Media Query)是CSS3新语法。 使用@media查询,可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
47 0
|
8月前
|
Web App开发 前端开发 算法
探索现代CSS布局技术:Flexbox和Grid
探索现代CSS布局技术:Flexbox和Grid
探索现代CSS布局技术:Flexbox和Grid