常用的CSS Hack技术集锦_html/css_WEB-ITnose
来源:http://www.ido321.com/938.html
一、什么是CSS Hack?
不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。
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:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。
PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
二、常用的CSS Hack
/* CSS属性级Hack */color:red; /* 所有浏览器可识别*/_color:red; /* 仅IE6 识别 */*color:red; /* IE6、IE7 识别 */+color:red; /* IE6、IE7 识别 */*+color:red; /* IE6、IE7 识别 */[color:red; /* IE6、IE7 识别 */color:red\9; /* IE6、IE7、IE8、IE9 识别 */color:red\0; /* IE8、IE9 识别*/color:red\9\0; /* 仅IE9识别 */color:red \0; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important*/
-------------------------------------------------------------/* CSS选择符级Hack */*html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red\9; } : /* 仅IE9识别 */--------------------------------------------------------------/* IE条件注释Hack */<!--[if IE]>此处内容只有IE可见<![endif]--> <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<![endif]--> <!--[if !IE 7]>此处内容只有IE7不能识别,其他版本都能识别,当然要在IE5以上。<![endif]--><!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if lt IE 7]> 低于IE7的版本才能识别,IE7无法识别。 <![endif]--><!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]--><!--[if !IE]>此处内容只有非IE可见<![endif]-->
三、IE6对!important的支持
!important一般用来做区分IE6和Firefox等浏览器的基本Hack手法。因为IE6不支持!important,而Firefox能读懂!important,其改变了样式的优先级。其实IE6在某些情况下,也能认识!important。
例如:
<style type="text/css">.demo{ color:red !important; color:green;}</style><div class="demo">www.admin10000.com</div>
上面代码在FF下字体为红色、IE6下字体为绿色。说明IE6忽视!important的存在。
再来看看:
<style type="text/css"> .demo{ color:red !important; } .demo { color:green; } </style> <div class="demo">www.admin10000.com</div>
如果IE6不认!important的话,上面代码.demo的内容应该显示为绿色,可偏偏不是,.demo的内容显示为红色,说明IE6是认得!important的。
两种情况的区别就在于:当在一个选择器中,利用!important改变样式优先级的时候,IE6下是无效的,后面的样式覆盖了前面的,!important被彻底无视了,利用!import
四、IE6下的多选择符
多类选择符的写法。例如:
#my.c1.c2 { color:red;}
.c1.c2 { color:red;}
以上写法在IE7+/FF/Opera/Safari 等浏览器都支持。
但在IE6中,后一个类名会覆盖前一个类名,也就是说,上例被IE6理解为:
#my.c2 { color:red;}
.c2 { color:red;}
同理:
#my.c1.c2.c3 { color:red;}
IE6理解为 #my.c3 {color:red;}
.c1.c2.c3 { color:red;}
IE6理解为 .c3 { color:red; }
所以开发中用多类来组合实现css效果的时候,注意IE6的这个问题。最好的方法就是,不要用类组合的形式。
下一篇:IE 8兼容:X-UA-Compatible的解释

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
