CSS 해킹 요약 빠른 참조 매뉴얼 브라우저 호환성을 알아야 합니다

CSS 해킹 요약 빠른 참조 매뉴얼 브라우저 호환성을 알아야 합니다_Experience Exchange

WBOY

풀어 주다： 2016-05-16 12:05:03

원래의

1624명이 탐색했습니다.

IE 브라우저 차단(즉, IE에 표시되지 않음)

코드 복사 코드는 다음과 같습니다.

 *:lang(zh) select {font:12px !important;} /*FF 표시, 특수 명령문: Opera의 최신 업데이트로 인해 이 문장은 이제 FF에 대한 특수 HACK이 되었습니다*/ 
select:empty {font:12px !important;} /*safari에서 볼 수 있음*/ 
여기 select는 상황에 따라 변경될 수 있는 선택기입니다. 두 번째 문장은 MAC의 Safari 브라우저에만 해당됩니다. 

IE7에서만 인식됩니다

코드 복사 코드는 다음과 같습니다

 *+html {…} 
IE7 전용 스타일을 만들어야 할 때 이 HACK을 사용할 수 있습니다. 

IE6 이하 인식

코드 복사 코드는 다음과 같습니다.

* html {…} 
많은 집주인이 IE6용 HACK이라고 작성했습니다. 실제로 IE5.x도 이 HACK을 인식할 수 있습니다. 다른 브라우저에서는 인식하지 못합니다. 
html/**/ >body select {……} 
이 문장은 이전 문장과 같은 효과를 냅니다. 

IE6만 인식하지 못합니다

코드 복사 코드는 다음과 같습니다

select { 디스플레이 /*IE6에서는 인식되지 않습니다.*/:none;} 
여기서는 주로 콜론 앞에 나오는 CSS 주석을 통해 속성과 값을 구분합니다. 

IE6, IE5만 인식되지 않습니다

코드 복사 코드는 다음과 같습니다

 
select/**/ { 표시 /*IE6, IE5는 인식하지 못합니다*/:none;} 
위 문장과의 차이점은 선택자와 중괄호 사이에 추가 CSS 주석이 있다는 점입니다. 

IE5만 인식하지 못합니다

코드 복사 코드는 다음과 같습니다

select/*IE5가 인식하지 못합니다*/ { display:none;} 
이 문장은 이전 문장에서 제거된 속성 영역의 주석입니다. IE5만 인식하지 못합니다 

박스 모델 솔루션

코드 복사 코드는 다음과 같습니다.

 
select {width:IE5.x width; voice-family :""}""; voice-family:inherit; width:corright width;} 
박스 모델 삭제 방법은 다음과 같습니다. !important of를 통해 처리되지 않습니다. 이 점은 명확해야 합니다. 

플로트 지우기

코드 복사 코드는 다음과 같습니다.

 
select :after {content:"."; display:block; height:0;clear:both; visible:hidden;} 
Firefox에서는 하위 항목이 모두 떠 있을 때 상위 항목의 높이를 완전히 지정할 수 없습니다. 전체 자식을 래핑한 다음 이 부동 HACK을 사용하여 부모를 한 번 정의하면 이 문제가 해결될 수 있습니다. 

줄임표

코드 복사 코드는 다음과 같습니다.

 
 select { -o-text-overflow:ellipsis; text-overflow:nowrap; Overflow:hidden; 
이렇게 하면 길이를 초과한 후 자동으로 텍스트가 잘립니다. 줄임표는 좋은 기술입니다. 단지 Firefox가 현재 이를 지원하지 않는다는 것뿐입니다. 

오페라에서만 인식됩니다

코드 복사 코드는 다음과 같습니다

 
 @media all and (min-width: 0px){ select {……} } 
Opera 브라우저에 대해 별도 설정을 합니다. 위의 내용은 CSS 작성에 대한 몇 가지 HACK입니다. 이는 로컬 호환성 문제를 해결하는 데 사용됩니다. 호환성 내용을 분리하려면 다음 필터를 사용해 볼 수도 있습니다. 이러한 필터 중 일부는 필터를 통해 특수 스타일을 가져오기 위해 CSS로 작성되었으며, 일부는 조건을 통해 필요한 패치 스타일을 연결하거나 가져오기 위해 HTML로 작성되었습니다. 

IE5.x용 필터, IE5.x만 보입니다

코드 복사 코드는 다음과 같습니다

 
@media tty { 
i{content:"";/*" "*/}} @import 'ie5win.css' /*";} 
}/* */ 

IE5/MAC 필터는 일반적으로 필요하지 않습니다

코드 복사 코드는 다음과 같습니다.

 
/**//*/ 
@import "ie5mac.css" 
/**/ 

IE의 if 조건 해킹

코드 복사 코드는 다음과 같습니다.

 
모든 IE가 이를 인식할 수 있습니다
 >IE5.0만 인식 가능
 
IE5.0 또는 IE5.5만 가능 인식됨
 IE 6에서만 인식됨-  
IE6에서만 인식됨
 
IE6 이하의 IE6 및 IE5.x에서 인식 가능

위의 내용은 IE7에서만 인식할 수 있으며 이는 포괄적이지 않을 수 있습니다. 편의를 위해 이러한 기술을 요약해 주시기 바랍니다. 향후 작업 문의를 위해 동시에 이러한 HACK
을 개발한 작성자에게 감사드립니다.