CSS 호환 IE6, IE7, FF 기술

4

#box{ float:left; width:100px; margin:0 0 0 100px; //      IE   200px    display:inline; //     }

2007년 11월 20일 화요일 10:44
1. CSSHACK 아래의 두 가지 방법은 현재의 모든 HACK을 거의 해결할 수 있다.
1, !important
IE7 에 맞춰서!important 지원,!important 방법은 현재 IE6의 HACK에만 적용됩니다.(작법에 주의하시오. 이 성명의 위치를 앞당겨야 한다는 것을 기억하시오.)

<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

 
2, IE6/IE77 페어 FireFox
*+html과 *html은 IE 특유의 라벨로 Firefox는 잠시 지원하지 않습니다.*+html은 IE7 특유의 라벨입니다.

<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed,      */
}
</style>

 
참고: *+html은 IE7의 HACK에 대해 HTML 상단에 다음과 같은 선언이 있어야 합니다. http://www.w3.org/TR/html4/loose.dtd ">
2. 만능float폐합(매우 중요합니다!)
clear float의 원리에 대해서는 [How To Clear Floats Without Structural Markup]에서 다음 코드를 Global CSS에 넣고 닫아야 하는div에 class="clearfix"를 추가하면 됩니다.

<style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

 
3. 기타 호환 기교(다시 수다)
1,FF에서div에padding을 설정하면width와height가 증가하지만IE는 그렇지 않습니다.(사용 가능! important 해결) 2, 중간 문제.1).수직으로 가운데에 놓다.line-height를 현재div와 같은 높이로 설정하고vertical-align:middle를 통과합니다.(내용을 줄로 바꾸지 않도록 주의한다.)2).수평이 중간이다.margin: 0 auto;(물론 만능은 아니다)3, a탭의 내용에 스타일을 추가하려면 디스플레이: Block을 설정해야 한다.(네비게이션 라벨에서 흔히 볼 수 있다) 4, FF와 IE가 BOX에 대한 이해의 차이로 인해 2px의 차이를 초래한 것은float로 설정된div가 i에서 margin을 배로 늘리는 문제도 있다. 5,ul 라벨은 FF 아래에서 기본적으로list-style과padding이 있다.불필요한 번거로움을 피하기 위해서 사전에 성명하는 것이 가장 좋다.(내비게이션 라벨과 내용 목록에서 흔히 볼 수 있다)6, 외부 wrapper의div는 높이를 정하지 말고 오버플로우:hidden을 추가하는 것이 좋다.높이 적응. 7, 손 커서에 대해.cursor: pointer. 한드는 IE에만 적용됩니다.
1 Firefox ie6 ie7에 대한 css 스타일은 현재 대부분 사용되고 있습니다!important에서 hack을 하면 i6과 Firefox 테스트는 정상적으로 보일 수 있지만 i7은 맞습니다!important는 정확하게 설명할 수 있습니다. 페이지가 요구에 따라 표시되지 않을 수 있습니다.IE7에 대한 좋은 hack 방법을 찾는 것은 바로'*+html'을 사용하는 것입니다. 지금은 IE7로 훑어보면 문제가 없을 것입니다.이제 CSS를 작성하면 다음과 같이 할 수 있습니다.

#1 { color: #333; } /* Moz */ 
* html #1 { color: #666; } /* IE6 */ 
*+html #1 { color: #999; } /* IE7 */

그러면 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #999로 글꼴 색상이 표시됩니다.
2 css 레이아웃의 중심 맞추기 문제의 주요 스타일 정의는 다음과 같습니다.
body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 설명: 먼저 부모 요소에서 TEXT-ALIGN: center를 정의합니다.이것은 부급 원소 내의 내용이 중간에 있다는 뜻이다.IE에 대해 이렇게 설정하면 된다.하지만mozilla에서는 가운데를 차지할 수 없습니다.해결 방법은 하위 요소를 정의할 때'MARGIN-RIGHT:auto;MARGIN-LEFT:auto'를 추가하는 것이다.설명해야 할 것은 만약에 이 방법으로 전체 페이지를 가운데에 놓으려면 한 DIV에 끼워 넣지 않는 것을 권장한다. 여러 개의div를 순서대로 뜯어낼 수 있다. 뜯어낸div마다 MARGIN-RIGHT:auto를 정의하기만 하면 된다.MARGIN-LEFT: auto; 됐어요.
세 상자의 모형이 다르게 해석된다.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

 
4 부동 i가 발생하는 두 배 거리
여기서 Block, inline 두 원소를 자세히 말하자면 Block 원소의 특징은 항상 새 줄에서 시작하고 높이, 너비, 줄 높이, 간격을 조절할 수 있다는 것이다.Inline 요소의 특징: 다른 요소와 같은 줄에서...제어 불가능(내장 요소);
#box {display:block;//내장 요소를 블록 요소로 시뮬레이션할 수 있습니다 display:inline;//같은 줄로 배열하는 효과 diplay:table;
5 IE 및 폭 및 높이 문제
IE는min-이 정의를 알지 못하지만, 실제로는 정상적인 width와height를min이 있는 상황으로 간주한다.문제는 커졌다. 만약에 너비와 높이만 사용한다면 정상적인 브라우저에서 이 두 값은 변하지 않을 것이다. 만약min-width와min-height만 사용한다면 IE 아래에는 너비와 높이를 설정하지 않은 것과 같다.예를 들어 배경 그림을 설정하려면 이 폭이 비교적 중요하다.이 문제를 해결하려면 다음과 같이 하십시오. #box {width: 80px;height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6페이지의 최소 너비
min-width는 매우 편리한 CSS 명령으로 요소를 최소화하거나 너비보다 작게 지정할 수 있으며, 이렇게 하면 조판이 항상 정확함을 보장할 수 있다.그러나 IE는 그것을 알지 못한다. 실제로 width를 최소 너비로 사용한다.이 명령을 IE에서도 사용할 수 있도록