CSS Hack의 쓰기 방법

4028 단어 csshack
테스트에 참여하는 브라우저: IE6, IE7, IE8, IE9 Preview, Firefox 3.67, Safari 5.0 및 Opera 10.0
다음은 IE 시리즈의 Hack Write(주의 순서)입니다.
.color {
	color:#000;/*         */
	color:grey !important;/*  IE6 ，         */
	color:red\9;/* IE     (ie6+)  ，  IE8    “*” “_” css hack；         hack */
	color:orange\0;/* IE8   */
	*color:yellow;/* IE6,IE7   */
	+color:#C0C;/* IE6,IE7   */
	_color:blue;/* IE6   */
}

실행 결과: IE6 텍스트 색상 블루, IE7 #C0C, IE8 orange, 기타 브라우저(IE9 Preview 포함) 모두grey
또한 IE7은 다음과 같은 쓰기 방식을 지원합니다.
*+html .bgcolor {
	background-color:#FF99CC;/*  IE7  “*+html” */
}

다음은 IE6, IE5에 대한 쓰기 방법입니다(주석의 배치 위치 참고).
html/*    */>body .ie6 {
	border:1px dashed #CCC;/* IE6，IE5   */
}
.nie6 {
	display:/*    */none;/* IE6    */
}
.nie56/*    */ {
	display:/*    */none;/* IE6，IE5    */
}

이외에도 부동 레이아웃을 사용할 때 한 div 블록은 두 개의 부동 div 블록을 포함하고 이 부모 div 블록에 다음 코드를 추가하여 부동을 지웁니다.
#box:after {/*     , IE6 IE7    */
	content:".";
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}

그러나 유감스럽게도 이런 방법은 IE6, IE7이 인식하지 못하기 때문에 종종 우리는 두 개의 자div 뒤에 빈div를 추가하여 부동을 제거하는 데 사용한다.
IE 시리즈의 경우 IE 특유의 주석을 사용하여 요소에 브라우저 호환성을 위해 특수한 스타일을 추가할 수 있습니다. 다음은 흔히 볼 수 있는 IE 주석입니다.
<!--[if IE]>
	HTML code
<![endif]-->

<!--[if IE 5,6,7,8...]>
	HTML code
<![endif]-->

<!--[if gte IE 5]>
	HTML code
<![endif]-->

<!--[if lt IE 6]>
	HTML code
<![endif]-->

<!--[if lte IE 5.5]>
	HTML code
<![endif]-->

<!--[if !IE]><!-->
	HTML code
<!--<![endif]-->

lt:Less than의 약자, 즉 작다는 뜻이다.lte: Less than or equal to의 약자, 즉 작거나 같다는 뜻입니다.gt: Greater than의 약자, 즉 보다 크다는 뜻입니다.gte:Greater than or equal to의 약자, 즉 크거나 같다는 뜻입니다.!:자바스크립트의 판단부호와 같지 않다는 뜻이다.
참조: http://hszy00232.blog.163.com/blog/static/43022753201001553136921/
Hack을 써야 하는 경우는 IE 시리즈이기 때문에 다른 브라우저에서는 기본적으로 Hack을 사용하지 않는 경우(개인적으로는 표준을 따르면 비IE 시리즈의 호환성을 너무 많이 고려한다. 당신의 페이지가 화려하지 않으면) 다음은 인터넷에서 만나 테스트를 거친 Hack 쓰기 방법이다.
div.text { /*                    ，       ,Firefox 3.67      ， IE6      IE         */
	-o-text-overflow:ellipsis; 
	text-overflow:ellipsis; 
	white-space:nowrap; 
	overflow:hidden; 
}

이러한 쓰기 방식은 대부분의 브라우저에서 지원됩니다.
다음은 Safari 및 Chrome과 호환되는 쓰기 방법입니다.
p {[color:#000;color:green;}      /* Safari,Chrome   */

이런 작법은 가능한 한 그것들을 양식의 맨 뒤에 두어야 한다. 왜냐하면 그것들은 그 뒤의 모든 양식을 효력을 잃게 하기 때문이다.
다음은 두 가지 위조 클래스가 호환되는 것이다. 느낌은 서로 다른 버전의 브라우저가 css2에 대한 것이다.1 또는 css3.0 다양한 지원:
.hack:empty { height:50px !important;border:1px solid #CCC; }/* IE6、IE7、IE8   ，IE9、Firefox 3.67、Safari 5.0、Opera 10.0     empty */
	*:lang(en) p { background:#CCC !important; }/* IE6、IE7   ，IE8、IE9、Firefox 3.67、Safari 5.0、Opera 10.0     lang */

HTML 코드는 다음과 같습니다.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

......

<div class="hack">Hack</div>
<div class="hack"></div>
<div class="hack">Hack</div>
<p>*:lang(en)</p>

실행 결과는 중간에 내용이 없는div 높이 50px이고 1px 테두리가 있습니다.p 내부 텍스트 배경색은 #CCC
또 하나는 Opera를 겨냥한 것이라고 한다.
@media all and (min-width: 0px){div.opera {border:1px soild #CCC;}}/*   Opera          */

호환성에 관해서는 접촉한 친구들만 깊이 느낄 수 있을 거라고 믿고, 해크의 내용도 많아 완전하게 열거하기 어렵고, 많이 실천해야만 브라우저 호환성에 대한 두려움을 극복할 수 있다.처음으로 오리지널 성분이 비교적 높은 글을 썼는데 내용도 계속 업데이트될 것입니다. 고수들의 교정을 환영합니다!
[전환] ASP.NET 알림 기능
ASP.NET에서 사이트의 절대 경로를 얻는 몇 가지 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage