当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 介绍我知道的hack方法

CSS样式表
CSS入门 XHTML文档结构树
IE6下 vertical-align:middle 和 height 引发的边框消失
详解CSS(层叠样式表)渐进增强
css vertical-align属性详细图解分析
CSS 垂直居中的5种实现方法
css 条件注释使用指南
CSS 样式表书写风格分析
CSS教程:条件注释的格式以及作用
探讨:网页外部引用CSS的两种方式
简化的CSS Reset:15套CSS重设实例
CSS技巧:IE6用import导入CSS的问题
编写适合所有项目的通用的reset.css
英文css教程:Introduction CSS
CSS学习之CSS网页制作的10个技巧
条件CSS的高级用法
纯语义化XHTML CSS设计表单方法
CSS 浏览器兼容问题整理大全(比较全)
import link的具体区别
菜单 stepdown 呈递下沉的解决方法
CSS3 box-sizing属性

CSS样式表 中的 介绍我知道的hack方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 109 ::
收藏到网摘: n/a


现在浏览器多了,做web页面还是比较痛苦的,当然,如果你不在乎自己做的页面在有些浏览器上面惨不忍睹那也是种不错的心态(至少少了点头痛的机会),可是你老板或者上司或者你的用户同意吗?-__!
下面我就介绍我知道的hack方法吧。我现在比较常用的,并且感觉用的不动脑子的方法是:
#yourId/.yourClass {/*normal*/}
* html #yourId/.yourClass {/*IE6 and below*/}
* html #yourId/.yourClass {/*IE7 only*/}
@media all and (min-width:0px){
#yourId/.yourClass { /*opera*/ }
}
用法:直接写CSS,用firefox作为第一浏览器看效果,然后IE6下不一样,就用* HTML重写那个ID容器或者类;如果IE 7不一样,就用* HTML重写,如果opera下面不一样,就用@media那个,当然这写重写的需要放在原来的后面。呵呵,就这么简单。这个方法用了之后可能会上瘾,可是会有诸如增加CSS文件容量等不爽,甚至有时候还会出现直接用这个写几段不同的。所以还是建议能熟悉了解个浏览器具体是在什么属性上支持不一样(例如border宽度IE6认为是不能算在width里面的,但是firefox是认为算width一起的),先尽力写几个浏览器通用的 CSS,不到必不得已不用这个hack方法。
原理:firefox认为是CSS语法错误,所以忽略。但是不同IE版本识别不同,不忽略,所以能实现hack,并且* HTML还能通过W3C验证,呵呵,爽吧。opera那个就不多说了,也是类似原理,但是看起来比较崩溃,要说明的是, firefox下没问题的话,opera基本也没什么问题的,所以不太会用到这个hack。
还需要其他浏览器hack方法?抱歉,我就知道这么多,因为我电脑上只有这么几个浏览器,呵呵,公司要求或者我自己想要把握的用户群够了。
另外就是!important这个方法了(firefox遇到这个优先级就最高,但是IE6不认,所以下面重新定义可以覆盖),不过这个貌似是以前甚至现在都很多人在用的,但是我个人感觉不是很爽,不能像上面的那样明确的搞定某个浏览器。比如现在IE7对规范CSS支持已经比IE6好了不知道多少,但是还是会有和firefox有的差异,所以用important的方式,控制起来并不像上面的那么一目了然。