CSS가 다양한 브라우저와 호환된다는 것은 일반적인 문제입니다.
다음 내용은 너무 새로운 내용은 아니며 순전히 개인적인 요약입니다.
1. CSS HACK
다음 두 가지 방법으로 오늘날 거의 모든 HACK을 해결할 수 있습니다.

1, !important

IE7의 !important 지원으로 !important 방법 이제 IE6만 HACK하세요.
(작성에 주의하세요. 선언 위치가 미리 나와 있어야 한다는 점을 기억하세요.)

2, IE6/IE77 대 FireFox

* +html 및 *html은 Firefox에서 지원되지 않는 IE 전용 태그입니다. 그리고 *+html은 IE7 전용 태그입니다.

참고:

*+html IE7용 HACK은 다음 문을 보장해야 합니다. HTML 상단에:

2. 범용 플로트 클로저

클리어 플로트의 원리는 [구조적 마크업 없이 플로트를 지우는 방법]을 참조하세요.

글로벌 CSS에 다음 코드를 추가하세요. 닫아야 하는 p에 class="clearfix"를 추가하면

3. 기타 호환성 팁

1, FF에서 p에 패딩을 설정하면 너비와 높이가 증가하지만 IE에서는 (!important로 해결 가능)
2, 센터링 문제
1) line-height를 현재 p와 동일한 높이로 설정한 다음 Vertical-align: middle을 전달합니다. (콘텐츠를 감싸지 않도록 주의하세요.)
2) 가로 중심. margin: 0 auto; (물론 보편적이지는 않습니다.)

3. display: block;을 설정해야 함(탐색 태그에서 흔히 발견됨)

4. FF와 IE 간의 BOX에 대한 이해 차이로 인해 2px 차이가 발생하고 일부 설정이 float로 설정되는 등의 문제가 있습니다. IE에서는 margin이 있습니다.
5, FF에서는 ul 태그에 기본적으로 padding이 있습니다. (내비게이션 태그와 콘텐츠 목록에서 흔히 발생합니다.)
6. 외부 래퍼로서 p는 고정된 높이를 가져서는 안 됩니다.
7. 손 커서 관련: 포인터는 IE에만 적용됩니다.

firefox ie6 ie7용 CSS 스타일 1개
이제 대부분은 해킹에 !important를 사용하고 있으며 ie6 및 firefox에 대한 테스트는 정상적으로 표시될 수 있습니다.
그러나 ie7은 !important를 올바르게 해석할 수 있습니다. 페이지가 필수로 표시되지 않습니다! 핀 찾기
IE7에 대한 좋은 해킹은 "*+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;"를 추가하는 것입니다.

이 방법을 사용하여 전체 페이지를 중앙에 배치하려면 그렇지 않는 것이 좋습니다. p에 설정하려면 여러 p를 순차적으로 분리할 수 있습니다.

분리된 각 p에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하면 됩니다.

상자 모델의 3가지 다른 해석

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

4 Double 생성 즉, 거리

#box{ float:left; width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. display:inline; //float를 무시합니다. block 요소와 inline 요소를 살펴보세요. Block 요소의 특징은 항상 새 줄에서 시작하고 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있다는 것입니다(block 요소). 요소는: 다른 요소와 같은 페이지에 있습니다. 라인에서는... 제어할 수 없습니다(인라인 요소);

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. display:inline; //같은 줄에 배열 구현 효과 diplay:table;

IE에서는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반적인 너비와 높이를 처리합니다. 이는 큰 문제를 야기합니다.

이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 변경되지 않습니다. IE에서 너비와 높이를 높게 설정합니다.
예를 들어 배경 이미지를 설정하려면 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px; ;}

6 페이지의 최소 너비

min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정할 수 있는 매우 편리한 CSS 명령입니다. 레이아웃은 항상 정확할 수 있습니다. 하지만 IE는 이를 인식하지 못하고

실제로는 너비를 최소 너비로 취급합니다. 이 명령이 IE에서 작동하도록 하려면 태그 아래에

를 넣은 다음 p에 대한 클래스를 지정합니다.
그런 다음 CSS는 다음과 같이 설계됩니다.
#container { min -width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
첫 번째 최소 너비는 정상이지만 2행의 너비는 Javascript를 사용합니다. 이는 IE에서만 인식되며 HTML 문서를 덜 형식적으로 만듭니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.

7 부동 소수점 지우기

.hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시} 또는 .hackbox{clear:both;}

또는 다음을 추가합니다. after(의사 개체)는 일반적으로 콘텐츠와 함께 사용되는 개체 뒤에 발생하는 콘텐츠를 설정합니다. IE는 이 의사 개체를 지원하지 않으며 Ie가 아닌 브라우저에서는 이를 지원합니다.
따라서 IE/WIN 브라우저에는 영향을 미치지 않습니다. . 가장 문제가 되는 것은...#box:after{ content: "."; display: block; height: 0;clear: visible: hide;}

8 p float IE 3픽셀 버그

왼쪽 개체는 떠 있고 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 위치가 지정되며 오른쪽 개체 내의 텍스트는 왼쪽에서 3px 간격을 갖습니다.

#box{ float :left; width:800px;}#left{ float:left width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; 이 문장이 핵심입니다}

HTML 코드

9개 속성 선택기(호환되지 않는 것으로 간주되며 CSS를 숨기는 버그입니다)

p[id]{}p[id]{}

.0 이하의 IE6.0 및 IE6 버전에서는 FF 및 OPera의 기능이 숨겨져 있습니다
속성 선택기와 하위 선택기의 범위는 여전히 형식적으로 좁습니다. p[id ]와 같이 속성 선택자의 크기가 비교적 크면 ID가 있는 모든 p 태그의 스타일이 동일합니다.

10 IE 숨기기 문제

p 애플리케이션이 다음과 같은 경우 복잡하고, 각 열마다 p 등 몇 가지 링크가 있습니다. 이때 숨바꼭질 문제가 발생하는 경향이 있습니다.

일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다.
해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하세요. 페이지 구조를 최대한 단순하게 유지하세요.

11 높이 비적응

높이 비적응은 내부 레이어 객체의 높이가 변경되면 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다. 특히 내부 레이어 객체의 경우

마진 또는 패딘 시간을 사용합니다.
예:

p 개체의 콘텐츠

CSS: #box {배경 -color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
해결책: P 개체 위와 아래에 공백 2개를 추가합니다. CSS 코드: .1{height:0px;overflow:hidden;} 또는 p에 테두리 속성을 추가합니다.

6. CSS 호환성 포인트 IE 대 FF 분석

CSS 호환성 포인트:

DOCTYPE이 CSS 처리에 영향을 줍니다

FF: p 여백-왼쪽 설정, margin -right는 자동으로 설정된 경우 이미 중앙에 있지만 IE에서는 그렇지 않습니다.

FF: 패딩을 설정한 후 p는 높이와 너비를 늘리지만 IE는 그렇지 않으므로 추가 높이와 너비를 설정하려면 !important를 사용해야 합니다.

FF: !important는 지원되지만, IE는 이를 무시할 것입니다. 중요

의 수직 중심 문제를 해결하기 위해 특별히 FF의 스타일을 설정합니다. p: Vertical-align:middle; :200px; 그런 다음 텍스트를 삽입하면 수직으로 중앙에 배치됩니다. 단점은 줄 바꿈 없이 콘텐츠를 제어해야 한다는 것입니다.

커서: 포인터는 IE FF에서 커서 손가락 모양을 동시에 표시할 수 있으며, 손만 IE는 가능합니다.

FF: 링크에 테두리 추가 및 배경색을 사용하려면 줄 바꿈이 없도록 하려면 display: block을 설정하고 float: left를 설정해야 합니다. 메뉴바를 참조하면, 메뉴바의 높이를 설정하면 하단 가장자리 표시가 어긋나는 것을 방지할 수 있습니다. 높이가 설정되지 않은 경우 메뉴바에 공백을 삽입할 수 있습니다. XHTML+CSS 호환 솔루션

거기 XHTML+CSS 아키텍처를 사용하면 많은 이점이 있지만 미숙한 사용 때문이든, 불분명한 사고 때문이든 실제로 몇 가지 문제가 있습니다. 모두가 둘러볼 필요가 없도록 먼저 아래에 직면한 몇 가지 문제를 적어 보겠습니다^^

1. Mozilla에서는 Firefox와 IE의 BOX 모델 해석이 일치하지 않아 2px 차이가 발생합니다. 해결 방법:

p{margin:30px!important;margin:28px;}

이 두 여백의 순서를 쓰면 안 된다는 점에 유의하세요. 반대로 Ajie에 따르면 !important 속성은 IE에서 인식되지 않지만 다른 브라우저에서는 인식될 수 있습니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다.

p{maring:30px;margin:28px}

정의를 반복하면 마지막 정의에 따라 실행되므로 margin:XXpx!important ;

2. IE5와 IE6의 BOX 해석이 일치하지 않습니다. IE5에서는 p{width:300px;margin:0 10px 0 10px;}p가 해석됩니다. 300px-10px(오른쪽 패딩)-10px(왼쪽 패딩) p의 최종 너비는 280px인 반면, IE6 및 기타 브라우저에서는 너비가 300px+10px(오른쪽 패딩) + 10px(왼쪽 패딩) = 320px로 계산됩니다. 현재 다음과 같이 수정할 수 있습니다.

p{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

에 대해/**/ 그것이 무엇인지 잘 모르겠습니다. IE5와 Firefox가 지원된다는 것만 알고 있습니다. 하지만 IE6은 그렇지 않습니다. 이해하시는 분 계시면 알려주세요. 감사합니다! :)

3. Mozilla에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있으므로 먼저 정의해 주세요

ul{margin:0;padding:0 ;}

은 대부분의 문제를 해결할 수 있습니다

4. 스크립트의 경우 xhtml1.1에서는 언어 속성을 지원하지 않습니다. 코드를

< type=" text/java">

그렇습니다

7. 당신이 모르는 10가지 CSS 기술

1. CSS 글꼴 속성 약어 규칙

일반적으로 CSS를 사용하여 글꼴 속성을 설정하는 방법은 다음과 같습니다.

font-weight:bold;

font-style:italic;

font-varient:small-caps ;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

하지만 한 줄에 모두 쓸 수도 있습니다:

글꼴: 굵은 기울임꼴 작은 대문자 1em/1.5em verdana,sans-serif;

좋아요! 한 가지 주의 사항: 이 단축 방법은 글꼴 크기와 글꼴 모음 속성이 모두 지정된 경우에만 작동합니다. 또한, 글꼴 두께, 글꼴 스타일, 글꼴 변형을 설정하지 않으면 기본값을 사용하므로 이 점을 명심하세요.

2. 두 개의 클래스를 동시에 사용

일반적으로 하나의 요소에 하나의 클래스(Class)만 설정할 수 있지만, 그렇다고 두 개를 사용할 수 없다는 의미는 아닙니다. 실제로 다음과 같이 할 수 있습니다.

...

P 요소에 동시에 두 개의 클래스를 제공합니다. 사이에 공백이 있으면 켜십시오. 그러면 텍스트 클래스와 사이드 클래스의 모든 속성이 P 요소에 추가됩니다. 두 클래스의 속성 사이에 충돌이 있는 경우 나중에 설정된 속성이 적용됩니다. 즉, CSS 파일에 나중에 배치된 클래스의 속성이 적용됩니다.

보충: ID에는

...

이렇게 쓸 수도 없습니다

3. CSS 테두리 기본값

은 일반적으로 다음과 같이 테두리의 색상, 너비 및 스타일을 설정할 수 있습니다.

border: 3px solid #000

이렇게 하면 다음과 같은 내용이 표시됩니다. 테두리는 너비 3픽셀, 검정색, 실선입니다. 그러나 실제로는 여기서만 스타일을 지정하면 됩니다.

스타일만 지정하면 다른 속성은 기본값을 사용합니다. 일반적으로 Border의 기본 너비는 중간이며 일반적으로 3~4픽셀과 같습니다. 기본 색상은 텍스트 색상입니다. 이 값이 딱 맞다면 그렇게 많은 설정을 할 필요가 없습니다.

4. 문서 인쇄용 CSS

많은 웹사이트에 인쇄용 버전이 있지만 실제로는 CSS를 사용하여 인쇄 스타일을 설정할 수 있기 때문에 필요하지 않습니다.

즉, 페이지에 두 개의 CSS 파일을 지정할 수 있습니다. 하나는 화면 표시용이고 다른 하나는 인쇄용입니다.

첫 번째 줄은 디스플레이용이고, 두 번째 줄은 인쇄용입니다. 미디어 속성에 주의하세요.

그런데 인쇄 CSS에는 뭐라고 써야 할까요? 일반 CSS를 디자인하는 것과 같은 방식으로 설정할 수 있습니다. 디자인하는 동안 이 CSS를 설정하여 CSS를 표시하여 효과를 확인할 수 있습니다. 어쩌면 일부 장식 이미지를 끄고 일부 탐색 버튼을 끄기 위해 display: none 명령을 사용할 수도 있습니다. 자세한 내용은 "인쇄 차이" 문서를 참조하세요.

5. 이미지 교체 기술

일반적으로 표준 HTML을 사용하여 이미지 대신 텍스트를 표시하는 것이 더 빠르고 가독성도 좋습니다. 하지만 일부 특수 글꼴을 사용하려면 그림만 사용할 수 있습니다.

예를 들어 물건 판매용 아이콘을 만들려면 다음 이미지를 사용하세요.

물론 가능하지만 검색 엔진의 경우 일반 텍스트에 비해 Alt의 대체 텍스트에 거의 관심이 없습니다. 많은 디자이너들이 검색 엔진을 속이기 위해 여기에 키워드를 많이 넣기 때문입니다. 따라서 방법은 다음과 같아야 합니다.

위젯 구매

그러나 이 방법에는 특별한 글꼴이 없습니다. 동일한 효과를 얻으려면 다음과 같이 CSS를 디자인할 수 있습니다.

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

이미지 높이를 실제 이미지의 높이로 바꾸도록 주의하세요. 여기서는 이미지가 배경으로 표시되며 실제 텍스트는 -2000픽셀의 들여쓰기가 설정되어 있으므로 화면 왼쪽에 2000포인트 나타나 보이지 않게 됩니다. 하지만 사진을 꺼두시는 분들은 아예 못 보실 수도 있으니 주의하시기 바랍니다.

6. CSS 상자 모델의 또 다른 조정 기술

이 상자 모델 조정은 주로 IE6 이전의 IE 브라우저에 적용되며 요소 너비가 우수합니다. . 예:

#box { width: 100px; border: 5px; padding: 20px }

다음과 같이 호출하세요.

이때 상자의 전체 너비는 150포인트여야 하며 이는 IE6 이전의 IE 브라우저를 제외한 모든 브라우저에서 정확합니다. 그러나 IE5와 같은 브라우저에서는 전체 너비가 여전히 100포인트입니다. 이 차이는 이전 사람들이 발명한 상자 조정 방법을 사용하여 처리할 수 있습니다.

그러나 CSS를 사용하여 동일한 목적을 달성하여 일관되게 표시할 수 있습니다.

#box { 너비: 150px } #box p { border: 5px; padding: 20px }

다음과 같이 호출하세요.

...

이렇게 하면 어떤 브라우저에서든 너비는 150포인트가 됩니다.

7. 블록 요소를 중앙에 정렬

폭이 고정된 웹 페이지를 만들고 웹 페이지를 가로 중앙에 배치하려면 일반적으로 다음과 같습니다.

#content { width: 700px ; margin: 0 auto }

를 사용하여 모든 요소를 둘러쌉니다. 이는 간단하지만 충분하지 않으며 IE6 이전 버전에서는 이 효과가 표시되지 않습니다. CSS를 다음과 같이 변경합니다.

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

이렇게 하면 내용이 중앙에 배치됩니다. 그래서

text-align: left가 Content에 추가되었습니다.

8. CSS를 사용하여 수직 정렬 처리

테이블을 사용하여 쉽게 수직 정렬을 수행할 수 있습니다. 테이블 단위를 수직 정렬: 중간으로 설정하면 됩니다. 그러나 이것은 CSS에서는 쓸모가 없습니다. 탐색 모음을 2em 높이로 설정하고 탐색 텍스트를 수직 중앙에 배치하려는 경우 이 속성을 설정하는 것은 쓸모가 없습니다.

CSS 방식이란 무엇인가요? 그런데 이 단어의 줄 높이를 2em으로 설정하면 됩니다. line-height: 2em이면 끝입니다.

9. 컨테이너 내 CSS 위치 지정

CSS의 장점 중 하나는 컨테이너 내에서도 요소를 임의로 배치할 수 있다는 것입니다. 예를 들어, 다음 컨테이너의 경우:

#container { position:relative }

이러한 방식으로 컨테이너의 모든 요소는 다음과 같이 상대적으로 배치됩니다.

30포인트 배치하고 싶다면 왼쪽부터 5개 지점까지 다음과 같이 할 수 있습니다:

#navigation { position: 절대; 30px; top: 5px }

물론 이렇게 할 수도 있습니다. :

여백: 5px 0 0 30px

4개 숫자의 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다. 물론 때로는 여백보다 위치 지정이 더 좋습니다.

10. 화면 하단으로 바로 들어가는 배경색

세로 방향에서는 CSS로 제어할 수 없습니다. 내비게이션 바가 콘텐츠 바와 같이 페이지 하단으로 바로 가기를 원할 경우 테이블을 사용하면 매우 편리하지만 CSS만 사용한다면 다음과 같습니다: