역사상 가장 완전한 css hack (ie6 - 9, fireforx, chrome, opera, safari)
3246 단어 CSS hack
브 라 우 저 백화 가 다 투 는 시대 에 전단 으로 개 발 된 우 리 는 우리 의 아름 다운 디자인 을 위해 각 브 라 우 저 에 적응 하기 위해 심혈 을 기울 일 수 있 습 니 다. 주로 자바 script 과 css 에 나타 납 니 다.javascript 이번 에는 얘 기 안 할 게 요. css 부터 얘 기해 볼 게 요.
서로 다른 브 라 우 저의 다른 버 전 (버 전 은 주로 ie 로) 에 적응 하기 위해 ie 라 는 기이 한 꽃 은 이제 6 - 9 를 호 환 해 야 합 니 다. 그것 의 10 도 곧 나 올 것 입 니 다.ie 에서 저 희 는 조건 설명 을 써 서 ie 와 다른 브 라 우 저, 그리고 ie 의 버 전 을 구분 할 수 있 습 니 다. 이것들 은 여러분 스스로 google 하 시기 바 랍 니 다.이 글 은 주로 css hack 를 토론 합 니 다.다음은 쓸데없는 말 을 더 해서 바로 코드
<html>
<head>
<title>Css Hack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>위의 이 코드 는 여러분 이 직접 복사 해서 html 로 저장 해서 각 브 라 우 저 에 저장 해 보 세 요.다음은 제 가 분석 해 보 겠 습 니 다.
background-color:blue; 브 라 우 저 마다 알 고 있 습 니 다. 여기 fireforx 에 사용 합 니 다.
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 특유 의 것 은 루트 선택 부호 {속성 \ 9;} 이다.
@media all and (min - width: 0px) {\ # test {background - color: black \ \ 0;} 이것 은 항상 ie 와 \ 0 을 앞 다 투어 알 아 보 는 신기 한 opera 입 니 다. \ 0 을 추가 해 야 합 니 다. 그렇지 않 으 면 fireforx, chrome, safari 도 모두 알 고 있 습 니 다.
@media screen and (- webkit - min - device - pixel - ratio: 0) {\ # test {background - color: gray;} 마지막 으로 이것 은 브 라 우 저의 새로운 chrome 과 safari 입 니 다.
이렇게 많아css hack 는 브 라 우 저 간 css 가 표시 하 는 차이 문 제 를 해결 할 수 있 지만 W3C 규범 에 부합 되 지 않 기 때문에 우 리 는 평소에 css 를 쓰 는 것 이 표준 에 따라 하 는 것 이 좋 습 니 다. 그러면 우리 가 앞으로 유지 하 는 데 도 큰 도움 이 되 고 더 이상 사용 할 수 없습니다.
만약 에 관리 에 게 더 좋 은 css hack 작법 이나 본문 에 타당 하지 않 은 점 이 있다 면 메 시 지 를 남 겨 주세요. 처음으로 글 을 쓰 는 것 을 환영 합 니 다. 가볍게 깨 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CSS Hacks 이후 브라우저 호환성 무시일반적인 상황에서 브라우저 호환은 IE6/7/8 세 가지 버전을 고려해야 한다. 물론 IE9이 점차적으로 시장에 출시되기 시작한 후에 더 많은 파생 버전이 생길 것이다.그래서 저는 현재 IE7~9 버전의 호환성만 고...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
