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生效等问题

相关文章
|
6月前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
61 0
|
2月前
|
前端开发 开发者 UED
CSS不同技术的探讨
【10月更文挑战第11天】 CSS不同技术的探讨
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
2月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用
|
4月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
56 3
|
4月前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
34 2
|
4月前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
30 2
|
4月前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
34 2
|
4月前
|
移动开发 JavaScript 前端开发
基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
这篇文章展示了如何使用纯CSS3、原生JavaScript以及Vue 3.0技术来实现序列帧动画效果,并通过代码示例和动画效果展示了每种方法的实现过程和最终效果。
150 0
|
5月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
45 1
下一篇
无影云桌面