精华内容
下载资源
问答
  • CSS Hack
    2021-08-04 06:58:49

    CSS hack的目的就是使你的CSS代码兼容不同的浏览器,那么你对css hack了解多少呢?下面就让学习啦小编来给你科普一下什么是css hack。

    css hack的原理

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

    CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

    选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

    HTML头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

    常用的CSS hack方式

    (1)方式一 条件注释法

    只在IE下生效

    只在IE6下生效

    只在IE6以上版本生效

    只在IE8上不生效

    非IE浏览器生效

    (2)方式二 类内属性前缀法

    属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。

    css hack的实际应用

    IE6 hack

    _background-color:#CDCDCD;/*ie6*/

    IE7 hack

    *background-color:#dddd00; /* ie 7*/IE8 hack

    background-color:red \0; /* ie 8/9*/IE9 hack

    background-color:blue \9\0;火狐,傲游,浏览器通用

    background-color:red!important;

    注意写hack的顺序,其中:

    background-color:red\0;IE8和IE9都支持;

    background-color:blue\9\0; 仅IE9支持;

    另外,background-color:eeeeee\9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。

    可综合上述规律灵活应用。

    IE9 和 IE8 以及其他版本的区别说明

    background-color:blue; 各个浏览器都认识,这里给firefox用;

    background-color:red\9;\9所有的ie浏览器可识别;

    background-color:yellow\0; \0 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;

    +background-color:pink; + ie7定了;

    _background-color:orange; _专门留给神奇的ie6;

    :root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple\0;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}

    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    选择符级Hack

    CSS内部选择符级Hack

    语法

    selector{ sRules }

    说明

    选择不同的浏览器及版本

    尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎

    通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。

    一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

    简单列举几个:

    * html .test{color:#090;} /* For IE6 and earlier */

    * + html .test{color:#ff0;} /* For IE7 */

    .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */

    .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

    内部属性Hack

    CSS内部属性级Hack

    语法:selector{?property:value?;}

    取值:

    _: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。

    *:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高。

    \9:选择IE6+。

    \0:选择IE8+和Opera。

    [;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。

    说明:一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:如想同一段文字在IE6,7,8,chrome,safari,显示为不同颜色,可这样写:

    .test{

    color:#000; /* 正常写法普遍支持 */

    color:#00F\9; /* 所有IE浏览器(ie6+)支持 */

    /*但是IE8不能识别“ * ”和“ _ ” */

    [color:#000;color:#0F0; /* SF,CH支持 */

    color:#00F\0; /* IE8支持*/

    *color:#FF0; /* IE7支持 */

    _color:#F00; /* IE6支持 */

    }

    注意了:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

    看过“css hack怎么应用”的人还看了:

    更多相关内容
  • 破解 CSS 不同浏览器中 css hack 的集合。 提供一种简单的方法来进行 css hack。较少的需要更少 v1.7.0 或更高版本 @import " path/to/hack-css.less "// give hack for each selector which you need.class { .only...
  • CSSHack解决兼容

    2017-09-03 12:49:20
    什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
  • 我在用chrome和FF显示我的html文件的时候,发现它们的结果有所出入,我先不管是什么原因造成的,先hack一下再说,可是以前用过的css hack 都是针对ie,ff,opera,这个chrome和ff该怎么区分呢?试了几个ie,ff的hack...
  • 一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack,下面的方法还是比较实用的,感兴趣的朋友可以参考下
  • 说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容的方法就是(必须是,因为这...
  • 关于CSS hack,网上有很多总结了,在他们的基础上,谈谈我个人的一些总结。其实大多数hack技术都是针对IE各个版本。
  • IE9的css hack使用示例

    2020-09-25 06:16:00
    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下,需要的朋友可以学习下
  • cssHack

    2022-01-12 07:36:37
    1. 什么是CSS Hack? 2. 属性Hack | 属性前缀法(即类内部Hack) 3. 选择符Hack | 选择器前缀法(即选择器Hack) 4. 条件Hack | IE条件注释法(即HTML条件注释Hack) 5. 注意: 1. 什么是CSS Hack? 由于不同厂商的...

    目录

    1. 什么是CSS Hack?

    2. 属性Hack  |  属性前缀法(即类内部Hack)

    3. 选择符Hack  |  选择器前缀法(即选择器Hack)

    4. 条件Hack  |  IE条件注释法(即HTML条件注释Hack)

    1. 什么是CSS Hack?
    由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

    一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
    CSS Hack常见的有三种形式:
    属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器

    2. 属性Hack  |  属性前缀法(即类内部Hack)
    属性级Hack:
    比如IE6能识别下划线“”和星号“”,
    IE7能识别星号“”,但不能识别下划线” ”,而firefox两个都不能认识。
    background-color:red9; 9所有的ie浏览器可识别;
    background-color:yellow0; 0 是留给ie8的。

    3. 选择符Hack  |  选择器前缀法(即选择器Hack)
    比如IE6能识别 *html .class{},IE7能识别*+html .class{}

    4. 条件Hack  |  IE条件注释法(即HTML条件注释Hack)
    条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

    5. 注意:
            实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

            CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
    CSSHack解决兼容
    09-03
    什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
    IE10 CSS Hack介绍及IE11的CSS Hack提前了解
    09-25
    一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack,下面的方法还是比较实用的,感兴趣的朋友可以参考下


    史上最全的CSS hack方式一览_freshlover的专栏_css hack
    1-8
    CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"...
    css hack是什么_“ CSS Hack”的解释是什么?_culi3182...
    12-31
    Which of the following Microsoft Browsers do you currently write or include CSS hacks for? 您当前为以下哪些Microsoft浏览器编写或包括CSS hack? When I first studied the results, I seemed to have missed an oddity in the ...
    IE9的css hack使用示例
    09-25
    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下,需要的朋友可以学习下
    CSS教程之通用的css hack简介
    09-25
    本文主要介绍了通用的css hack
    css hack比较全_smshuxue的专栏
    1-4
    很多朋友搞不清楚CSS中有哪些HACK,怎么使用,我翻译+整理了一下贴在这里。这篇文章是关于CSS的hacking技术。不要和微软专有 的CSS属性“滤镜”混淆。在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好。不幸的是,我们并不是...
    CSS hack技巧大全
    10-23
    important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容 hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家...
    IE8的css hack \9 使用说明
    12-11
    首先感谢“丸子”提供的这个IE8的css hack; 关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack: .test{ color:#000000; /* FF,OP支持 */ color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;...
    说说CSS Hack 和向后兼容(推荐)
    12-09
    说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。而解决兼容的方法就是(必须是,因为这...
    CSS Hack详解
    01-19
    摘要: 在我们制作页面时CSS hack由于不同的浏览器,比如Internet Explorer,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对...
    最新CSS hack技术(IE6/7/8)
    09-25
    最新CSS hack技术(IE8),需要的朋友可以参考下。
    CSS Hack是什么意思?css hack有什么用?
    热门推荐
    大眼萌
     4万+
    第一部分:什么是CSS Hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。 例如: 1、margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍,也就是说margin-left:20px;在ie6中距左侧对象的实际显示...
    CSS Hack 汇总快查 振之整理
    01-19
    屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select {font...仅IE7与IE5.0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 仅IE7可以识别*+html select {…!important;}当面
    CSS Hack Table
    07-15
    CSS Hack Table CSS Hack栏目收集常见CSS bug漏洞兼容问题,并提供DIV CSS hack的解决方法。简单地讲,css hack指各版本及各品牌浏览
    CSS Hack 有关浏览器兼容方面
    09-25
    写完第七课,因为时间问题没有继续写第八课有关浏览器兼容方面的文章,以为大家可以自己掌握这方面的知识,不过发现有很多同学找了很多资料,很多文章去研究,费时费力的,效果也...带领大家用最短的时间掌握CSS Hack!
    css hack符,CSS Hack
    weixin_35063366的博客
     8
    各种ie兼容hack属性标记法IE6-对于IE6-浏览器主要使用下划线_和中划线-这两种字符_color:blue;-color:blue;IE7-对于IE7-浏览器可以使用非常多的字符,包括`~!@#$%^&*()=+{[]:<>,.?/但是,比较常用的是加号+和星号*+color:blue;*color:blue;IE10-使用后缀\9可以识别出IE10-浏览器colo...
    CSS Hack技术介绍及常用的Hack技巧集锦
    09-25
    主要介绍了CSS Hack技术介绍及常用的Hack技巧集锦,本文讲解了什么是CSS Hack、常用的CSS Hack、IE6对!important的支持、IE6下的多选择符等内容,需要的朋友可以参考下
    css hack 记录
    09-25
    css hack 记录,做前端开发的朋友可以看下。
    css hack问题
    09-25
    ie5 hack, ie 6 hack, ie 8 hack,ie 9 我没用,暂时也没接触过9的hack,随着浏览器的更新(而且换代越来越快),是不是我有写不完的hack,还是说高手从不写hack。
    HTML期末作业~个人信息展示网站响应式模板(HTML+CSS+JavaScript)
    最新发布
    陈新科的博客
     85
    项目:雷神个人信息展示项目 作品描述:个人信息展示网站响应式模板HTML+CSS+JavaScript。主要包括的页面有HOME,ABOUT,MOVIE,SPORTS,TRAVEL,SINGLE,CONTACT等总共7个页面。 视频链接:分享两个前端网页,能用我的就别自己做了(含源码) 实现技术:CSS+HTML+JS+H5+CSS3+jqury+bootstrap; 作品演示 1.网站首页 2.MOVIE页 3.响应式 目录结构 代码展示 <header cl
    HTML5前端笔记
    weixin_44860598的博客
     231
    文章目录HTML图片表格表单布局与选择器选择器权重文本属性图的使用元素浮动HTML5新增标签和属性常用新标签常用新属性新增的type属性值多媒体标签多媒体 embed多媒体 audio多媒体 videoCSS属性基本三大类型布局中的定位语义化标签笔记Div与SpanCSS基础语法内联样式与内部样式外部样式CSS颜色表示法背景样式CSS边框样式CSS文字样式CSS文本效果CSS段落样式CSS复合样式CSS选择器伪类选择器CSS继承CSS优先级CSS盒子模型box-sizingmargin使用问题margin自
    H5零基础-盒子模型简介
    u010707262的博客
     1
    所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子,封装周围的HTML

    展开全文
  • 本文主要介绍了通用的css hack
  • 屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select {font...仅IE7与IE5.0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 仅IE7可以识别*+html select {…!important;}当面
  • 一、IE6 下 a标签嵌套img标签IE下会有边框,那是超链接默认的样式,解决办法:img{border:0 none;} 1、终极方法:条件注释 <!–[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下...–在 IE6及IE6以下版本中加载css
  • 最新CSS hack技术(IE8),需要的朋友可以参考下。
  • CSS hack

    2022-02-22 14:08:54
    最近停了几个项目,大家都久违的轻松点了,最近这十年几乎没写过代码了,去年买了个服务器,搭了个小网站,用的wordpress,趁这机会熟悉一下...1、CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozill

    最近停了几个项目,大家都久违的轻松点了,最近这十年几乎没写过代码了,去年买了个服务器,搭了个小网站,用的wordpress,趁这机会熟悉一下wordpress的相关知识,配置环境也好,模板制作也好再或者是PHP也好,正好我们团队的主力语言也是PHP。那会做电影的时候用的linux系统是opensure,其它的倒是没多接触过,但愿在这个过程中都做一些了解吧。

    css hack的意思是浏览器兼容。

    1、CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

    2、hack实例:

    1)属性级Hack:比如IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线”_ ”,而firefox两个都不能认识。

    为什么不推荐使用CSS hack来解决兼容性问题

    1、CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。2、CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。

    因此,在设计之初,写CSS hack需要遵循以下三条原则:

    1) 有效: 能够通过 Web 标准的验证 。

    2)只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器 。

    3)代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。

    常用的CSS Hack

    展开全文
  • 为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
  • CSS Hack详解

    2021-01-19 20:53:44
    摘要: 在我们制作页面时CSS hack由于不同的浏览器,比如Internet Explorer,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对...
  • 网页制作Webjx文章简介:仅 Safari 和 Opera 识别的 Hack;仅 Firefox 3 和 IE7 识别的 Hack。 1、仅 Safari 和 Opera 识别的 Hack@media all and (min-width: 0px){/* Safari and Opera rules here */}或者@media
  • CSS Hack是什么意思?css hack有什么用?

    万次阅读 多人点赞 2018-08-14 10:02:58
    第一部分:什么是CSS HackCSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式...

    第一部分:什么是CSS Hack?

    CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。

    例如

    1、margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍,也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px,而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为:.kwstu{margin-left:20px;_margin-left:20px;}

    2、kwstu{background:green;/*forfirefox*/width:300px;_width:200px;},一般浏览器会先给元素使用width:300px;的样式,紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别,所以此样式在IE6中实际设置对象的宽度为200px,后面的把前面的给覆盖了,而其他浏览器不识别_width不会执行_width:200px;这句样式,所以在其他浏览器中设置对象的宽度就是300px。

    3、比如要分辨IE6和firefox两种浏览器,可以这样写:

    div { background:green;/*forfirefox*/ *background:red;/*forIE6*/(bothIE6&&IE7) }

    我在IE6中看到是红色的,在firefox中看到是绿色的。

    以下是引自百度百科的定义:

    CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
    简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

    注意: 我们通常主要考虑的浏览器有IE6、IE7、IE8谷歌浏览器(chrome)火狐(Mozilla Firefox)即可,至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核,所以只需要兼容以上浏览器即可兼容TT傲游浏览器。

    CSS Hack常见的有三种形式:

    CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。

    1、属性级Hack:比如IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线”_ ”,而firefox两个都不能认识。

    2、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}

    3、IE条件注释Hack:IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE:&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;,针对IE6及以下版本:&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSSJSHTML服务器代码等。

     

    第二部分:CSS hack的实际应用

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

    区别IE6与FF:

    background:orange;*background:blue;

    区别IE6与IE7:

    background:green!important;background:blue;

    区别IE7与FF:

    background:orange;*background:green;

    区别FF,IE7,IE6:

    background:orange;*background:green;_background:blue;
    background:orange;*background:green!important;*background:blue;

    注:IE都能识别*;标准浏览器(如FF)不能识别*;IE6能识别*;不能识别 !important ;IE7能识别*,能识别!important;FF不能识别*,但能识别!important;

    浏览器优先级别:

    FF<IE7<IE6,CSS hack

     书写顺序一般为FF IE7 IE6

    以: " #demo {width:100px;} "为例:

    #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
    * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
    *+html #demo {width:130px;} /*会被IE7执行*/
    所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
    IE8 最新css hack:
    "9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.(只针对IE9 Hack)
    "0" IE8识别,IE6、IE7不能.
    "*" IE6、IE7可以识别.IE8、FireFox不能.
    "_" IE6可以识别"_",IE7、IE8、FireFox不能.

     IE6 hack

    _background-color:#CDCDCD;/*ie6*/

     IE7 hack

    *background-color:#dddd00; /* ie 7*/IE8 hack
    background-color:red 0; /* ie 8/9*/IE9 hack
    background-color:blue 90;火狐,傲游,浏览器通用
    background-color:red!important;

    注意写hack的顺序,其中:

    background-color:red0;IE8和IE9都支持;
    background-color:blue90; 仅IE9支持;
    另外,background-color:eeeeee9;的HACK支持IE6-IE8,但是IE8不能识别“*”和“_”的CSS HACK。

    可综合上述规律灵活应用。

    IE9 和 IE8 以及其他版本的区别说明

    background-color:blue; 各个浏览器都认识,这里给firefox用;
    background-color:red9;9所有的ie浏览器可识别;
    background-color:yellow0; 0 是留给ie8的,最新版opera也认识,后面自有hack写了给opera认的,所以,0我们就认为是给ie8留的;
    +background-color:pink; + ie7定了;
    _background-color:orange; _专门留给神奇的ie6;
    :root #test { background-color:purple9; } :root是给ie9的,网上流传了个版本是 :root #test { background- color:purple0;},这个,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}
    @media all and (min-width:0px){ #test {background-color:black0;} } 这个是老是跟ie抢着认0的神奇的opera,必须加个0,不然firefox,chrome,safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    选择符级HackCSS内部选择符级Hack语法

    <hack> selector{ sRules }

    说明选择不同的浏览器及版本尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。简单列举几个:

    * html .test{color:#090;} /* For IE6 and earlier */
    * + html .test{color:#ff0;} /* For IE7 */
    .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
    .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

    内部属性HackCSS内部属性级Hack语法:

    selector{<hack>?property:value<hack>?;}

    取值:

    注意: 不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。补充:IE6能识别* ,但不能识别 !important,IE7能识别 *,也能识别!important;FF不能识别 *,但能识别!important;下划线” _ “,IE6支持下划线,IE7和firefox均不支持下划线。

     

    第三部分:为什么不推荐使用CSS hack来解决兼容性问题 

    CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此,在设计之初,写CSS hack需要遵循以下三条原则:

    • 有效: 能够通过 Web 标准的验证
    • 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
    • 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。

     

    常用的CSS Hack

    代码如下:

    展开全文
  • css Hack

    2021-09-08 21:10:37
    是针对不同浏览器写不同的csss,就是cssHack。 属性Hack丶选择符丶条件注释Hack丶Hack主要是针对IE浏览器 1,条件Hack 条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE...
  • CSS Hack常见的有三种形式:CSS属性HackCSS选择符Hack以及IE条件注释HackHack主要针对IE浏览器。 1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而...
  • IE9下css hack写法

    2021-08-05 03:57:17
    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下:select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:...
  • CSS Hack

    2021-01-19 20:16:08
    一、什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS ...
  • css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,不同的浏览器对css的解析结果是不同的,因此会导致相同的css输出的页面效果不同,这就需要css hack来解决浏览器局部的兼容性问题。...
  • css hack问题

    2020-12-13 11:07:31
    ie5 hack, ie 6 hack, ie 8 hack,ie 9 我没用,暂时也没接触过9的hack,随着浏览器的更新(而且换代越来越快),...IE6,CSS hack书写顺序一般为FF IE7 IE6 以: " #demo {width:100px;} "为例; 复制代码代码如下:#demo
  • CSS Hack常见的有三种形式:CSS属性HackCSS选择符Hack以及IE条件注释HackHack主要针对IE浏览器。 1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而...
  • 说到浏览器兼容性问题,就必须说CSS Hack!提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块,不过在CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是,你平时做个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,486
精华内容 15,394
关键字:

CSS Hack