IE 및 Firefox 브라우저에 대한 CSS 호환성 팁 편집

#container{ 최소 너비: 600px; 너비:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

첫 번째 최소 너비는 정상이지만 두 번째 줄의 너비는 IE에서만 인식되는 javascript를 사용하므로 HTML 문서가 덜 형식화됩니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.

6. DIV 플로팅 IE 텍스트로 인해 3픽셀 버그가 발생함

왼쪽 개체는 부동되고 오른쪽 개체는 외부 패치의 왼쪽 여백을 사용하여 위치가 지정됩니다. 오른쪽 개체 내의 텍스트는 왼쪽에서 3px 간격으로 배치됩니다.

#상자{플로트:왼쪽;폭:800px;}
#왼쪽{ 부동: 너비:50%;}
#오른쪽{너비:50%;}
*html #left{ margin-right:-3px; //이 문장이 핵심입니다}

div 애플리케이션이 복잡한 경우 각 열에 일부 링크가 있으며 DIV에서 숨기기 문제가 쉽게 발생할 수 있습니다.

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

8. 플로트 div가 닫혀 있으며 적응형 높이가 있습니다.

①예: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >여기서 NOTfloatC는 계속 번역을 원하지 않고 아래쪽으로 정렬하려고 합니다. (floatA 및 floatB의 속성은 float:left로 설정되었습니다.)

이 코드는 IE에서는 잘 작동하지만 문제는 FF에 있습니다. 그 이유는 NOTfloatC가 부동 레이블이 아니므로 부동 레이블을 닫아야 하기 때문입니다. <#div class="floatB"> <#div class="NOTfloatC"> 사이에 <#div class="clear">를 추가하세요. 이 div는 위치에 주의해야 하며 다음과 같은 두 div와 동일해야 합니다. 부동 속성. 레벨 간에 중첩 관계가 있을 수 없습니다. 그렇지 않으면 예외가 발생합니다. 그리고 다음과 같이 클리어 스타일을 정의합니다: .clear{clear:both;}

② 높이가 자동으로 조정되도록 div의 높이를 설정하지 마십시오. 플로트 상자가 포함된 경우 래퍼에 Overflow:hidden을 추가해야 합니다. 이 경우 IE에서는 자동 높이 조정이 유효하지 않습니다. 시간이 지나면 IE가 트리거되어야 합니다. 레이아웃 전용 속성(사악한 IE!)은 Zoom:1;을 사용하여 수행될 수 있으므로 호환성이 달성됩니다.
예를 들어 래퍼는 다음과 같이 정의됩니다.

.colwrapper{ 오버플로:숨김; 확대/축소:1; 여백:5px 자동;}

③조판을 위해 우리가 가장 많이 사용하는 CSS 설명은 아마도 float:left일 것입니다. 때로는 n열의 float div 뒤에 통합 배경을 만들어야 합니다. 예를 들면 다음과 같습니다.

예를 들어, 세 열의 배경색이 모두 파란색이 되도록 페이지의 배경을 파란색으로 설정하려고 합니다. 그러나 왼쪽 가운데 오른쪽이 아래쪽으로 늘어남에 따라 페이지의 높이가 실제로는 동일하게 유지되는 문제가 있습니다. 그 이유는 페이지가 부동 속성이 아니고 페이지를 중앙에 배치해야 하기 때문에 부동으로 설정할 수 없기 때문입니다. 따라서 다음과 같이 해결해야 합니다.

해결책은 너비가 100%인 왼쪽 부동 소수점 DIV를 포함하는 것입니다.

④범용 플로트 폐쇄(매우 중요!)

Clear Float의 원리는 [구조적 마크업 없이 Float를 지우는 방법]을 참고하세요. Global CSS에 다음 코드를 추가하고 닫아야 하는 div에 class="clearfix"를 추가하세요.

/* 수정사항 지우기 */
.clearfix:after { 내용:"."; 표시:블록; 높이:0;
.clearfix { 디스플레이:인라인 블록 }
/* IE Mac에서 숨기기 */
.clearfix {디스플레이:블록;}
/* IE Mac에서 숨기기 종료 */
/* 클리어픽스 끝 */

또는 다음과 같이 설정합니다: .hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시}

9. 높이 조절이 안되네요

비적응 높이는 내부 객체의 높이가 변경될 때, 특히 내부 객체가 여백이나 패딩을 사용하는 경우 외부 높이가 자동으로 조정될 수 없음을 의미합니다.

예:

#box {배경색:#eee }
#box p {여백-상단: 20px; 여백-하단: 20px;

해결 방법: P 개체 위와 아래에 두 개의 빈 div 개체를 추가합니다(.1{height:0px;overflow:hidden;}). 또는 DIV에 테두리 속성을 추가합니다.

10.IE6에서는 왜 그림 아래에 공백이 있나요?

이 버그를 해결하는 방법에는 여러 가지가 있습니다. html의 레이아웃을 변경하거나 img를 display:block으로 설정하거나 수직 정렬 속성을 수직 정렬:상단으로 설정할 수 있습니다.

하단 중간 텍스트-하단 모두 해결 가능합니다.

11. 텍스트 입력란에 텍스트를 정렬하는 방법

수직 정렬 추가:중간;

<스타일 유형="텍스트/css">

12.웹 표준에 정의된 id와 class에 차이가 있나요?

(1) 웹 표준에서는 반복 ID를 허용하지 않습니다. 예를 들어 div id="aa"는 클래스를 정의하므로 이론적으로 여러 개가 필요한 정의입니다. 그는 참조를 사용할 수 있습니다.

(2).속성의 우선순위 문제

ID의 우선순위가 클래스보다 높습니다. 위의 예를 참조하세요.

(3) 페이지의 개체에 대해 스크립트 작업을 수행하려는 경우 해당 개체에 대한 ID를 정의하면 됩니다. 그렇지 않으면 페이지 요소를 탐색하고 지정해야만 찾을 수 있습니다. 이는 상대적으로 시간과 자원을 낭비하지만 ID보다 훨씬 덜 단순합니다.

13. LI에서 길이를 초과한 콘텐츠를 타원으로 표시하는 팁

이 기술은 IE 및 OP 브라우저에 적용 가능합니다.

<스타일 유형="텍스트/css">

14. IE가 웹 표준에 따라 스크롤 막대 색상을 설정할 수 없는 이유는 무엇입니까?

해결책은 본문을 html로 바꾸는 것입니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

<스타일 유형="텍스트/css">

15. 약 1px 높이의 컨테이너를 정의할 수 없는 이유는 무엇입니까?

IE6에서 이 문제는 기본 행 높이로 인해 발생하며 다음과 같은 많은 해결 기술이 있습니다.
오버플로:숨겨진 확대/축소:0.08 줄 높이:1px

16. Flash에서 레이어를 표시하는 방법은 무엇입니까?

해결책은 FLASH의 투명도를 설정하는 것입니다.

17. 브라우저에서 레이어를 세로 중앙에 배치하는 방법

여기서는 백분율 절대 위치 지정과 패치 외부에서 음수 값을 사용하는 기술을 사용합니다. 음수 값의 크기는 자체 너비와 높이를 2로 나눈 값입니다.

<스타일 유형="텍스트/css">

Firefox 및 IE에 대한 CSS 호환성 팁

1. Div 센터링 문제

margin-left 및 margin-right가 자동으로 설정된 경우 div는 이미 중앙에 있습니다. IE에서는 본문을 중앙에 맞추도록 설정해야 합니다. 상위 요소 내의 콘텐츠는 중앙에 배치됩니다.

2. 링크(태그)의 테두리와 배경

링크에 테두리와 배경색을 추가하려면 줄 바꿈이 없도록 display: block 및 float: left를 설정해야 합니다. 메뉴바를 참조하면, 메뉴바의 높이를 설정하는 것은 하단 가장자리 표시가 어긋나는 것을 방지하기 위함입니다. 높이가 설정되지 않은 경우 메뉴바에 공백이 삽입될 수 있습니다.

3. 하이퍼링크 접속 후 호버 스타일이 나타나지 않는 문제

클릭하여 방문한 하이퍼링크 스타일이 더 이상 호버링 및 활성화되지 않습니다. 많은 사람들이 이 문제를 겪었을 것입니다. 해결 방법은 CSS 속성의 순서를 변경하는 것입니다.

암호:

<스타일 유형="텍스트/css">

4. 커서 손가락 커서

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

5.UL의 패딩 및 마진

FF에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 기본적으로 값이 있으므로 ul{margin:0;padding:0;}을 먼저 정의하면 대부분의 문제를 해결할 수 있습니다.

6. FORM 태그

이 레이블은 IE에서는 자동으로 일부 여백을 가지지만 FF에서는 여백이 0입니다. 따라서 일관되게 표시하려면 CSS에서 여백과 패딩을 지정하는 것이 가장 좋습니다. 위의 두 가지 문제를 해결하려면 일반적으로 내 CSS를 사용하세요. , 스타일 ul, form{margin:0;padding:0;}이 먼저 정의되므로 나중에 이에 대해 걱정할 필요가 없습니다.

7. BOX 모델 설명 불일치 문제

FF와 IE의 BOX 모델 해석이 일관되지 않아 2px 차이가 발생합니다. 솔루션 팁: div{margin:30px!important;margin:28px;} 두 여백의 순서가 뒤바뀌면 IE가 인식할 수 없습니다. 중요한 속성이지만 브라우저에서는 이를 인식할 수 없습니다. 따라서 IE에서는 실제로 다음과 같이 해석됩니다.

div{maring:30px;margin:28px}를 반복적으로 정의하면 마지막 것이 실행되므로 그냥 margin:xx px!important;#box{ width:600px; //for ie6.0- w라고 쓸 수는 없습니다. idth:500px ; //ff+ie6.0의 경우}
#box{ 너비:600px!중요 //ff 너비:600px; //ff+ie6.0 너비 /**/:500px //ie6.0-}

8. 속성 선택기(호환되는 것으로 간주할 수 없으며 CSS를 숨기는 버그입니다)

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

이는 IE6.0 및 IE6.0 이하 버전에서는 숨겨져 있으며 FF 및 Opera에서 작동합니다. 속성 선택기와 하위 선택기 간에는 여전히 차이가 있지만 속성의 범위는 형식이 줄어듭니다. p[id]와 같이 선택기가 상대적으로 크면 id가 있는 모든 p 태그는 동일한 스타일입니다.

9.가장 무자비한 수단 - !important

실제로 일부 세부적인 문제를 해결할 방법이 없다면 이 기술을 사용할 수 있습니다. FF는 먼저 "!important"를 자동으로 구문 분석하지만 IE는 다음과 같이 이를 무시합니다.

.tabd1{
background:url(/res/images/up/tab1.gif) 반복 없음 0px 0px !important; /*FF 스타일*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px /* IE용 스타일 */}

xxxx !important 문장이 다른 문장 위에 배치되어야 한다는 점은 주목할 가치가 있습니다.

10. IE와 FF의 기본값 문제

아마도 당신은 왜 IE와 FF를 위해 다른 CSS를 작성해야 하는지, 왜 IE가 그렇게 골치 아픈지 불평하고 CSS를 작성하는 동안 실제로 IE에는 표준 지원이 없다고 저주했을 것입니다. for CSS that we do 상상만큼 역겨운 일이지만, 핵심은 IE와 FF의 기본값이 다르다는 것입니다. 이 기술을 익히면 CSS를 작성하는 것이 그리 어렵지 않다는 것을 알게 될 것입니다. FF 및 IE와 호환됩니다. 간단한 CSS의 경우에는 전혀 필요하지 않습니다."

우리 모두는 브라우저가 웹 페이지를 표시할 때 웹 페이지의 CSS 스타일 시트를 기반으로 이를 표시하는 방법을 결정한다는 것을 알고 있지만 스타일 시트에 모든 요소를 ​​자세히 설명할 필요는 없습니다. 따라서 설명되지 않은 속성의 경우 브라우저는 텍스트와 같은 내장된 기본 방법을 사용하여 표시합니다. CSS에서 색상을 지정하지 않으면 브라우저는 검정색 또는 시스템을 사용합니다. div 또는 기타 요소의 배경을 표시하는 색상입니다. CSS에 지정되지 않은 경우 브라우저는 이를 흰색 또는 투명으로 설정하며 기타 정의되지 않은 스타일에 대해서도 마찬가지입니다. 따라서 FF와 IE 사이에 많은 것들이 다르게 표시되는 근본적인 이유는 기본 표시가 다르기 때문입니다. 이 기본 스타일이 어떻게 표시되어야 하는지에 대해서는 w3에 이를 규정하는 해당 표준이 있는지 알고 있으므로, 없습니다. 이 점에 대해 논평할 필요가 있습니다.

11. FF의 텍스트가 컨테이너 높이를 확장할 수 없는 이유는 무엇입니까?

표준 브라우저에서 고정된 높이 값을 갖는 컨테이너는 IE6처럼 늘어나지 않습니다. 그렇다면 고정된 높이를 갖고 늘어나도록 하려면 어떤 설정을 해야 할까요? 해결책은 높이를 제거하고 min-height:200px를 설정하는 것입니다. 최소 높이를 모르는 IE6을 처리하려면 다음과 같이 정의할 수 있습니다.

{
높이:자동!중요;
높이:200px;
최소 높이:200px;
}

12.FireFox에서 연속된 긴 필드를 자동으로 래핑하는 방법

우리 모두 알고 있듯이 IE에서는 Word-wrap:break-word를 직접 사용할 수 있습니다. FF에서는 JS 삽입 기술을 사용하여 문제를 해결합니다.

<스타일 유형="텍스트/css">

/* 함수 toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
동안(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */

13. IE6의 컨테이너 너비가 FF의 컨테이너 너비와 다른 이유는 무엇입니까?

문제의 차이점은 컨테이너의 전체 너비에 테두리 너비가 포함되는지 여부입니다. 여기서 IE6은 이를 200PX로 해석하는 반면 FF는 이를 220PX로 해석합니다. 그렇다면 문제의 정확한 원인은 무엇입니까? 컨테이너 상단의 xml을 제거하면 원래 문제가 여기에 있음을 알 수 있습니다. 상단의 문은 IE의 qurks 모드를 트리거합니다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

<스타일 유형="텍스트/css">

IE7.0의 CSS 지원에 새로운 문제가 있으며 이는 다음과 같이 해결됩니다.

첫 번째 유형, CSS HACK

/*IE7 및 IE6의 경우*/
_height:20px; /*IE6의 경우*/

순서에 주의하세요.

다음도 CSS HACK이지만 위와 같이 간단하지는 않습니다.

#예제 { 색상: #333 } /* 모즈 */
* html #예제 { 색상: #666 } /* IE6 */
*+html #예제 { 색상: #999 } /* IE7 */

두 번째는 IE 전용 조건부 주석을 사용하는 것입니다.

세 번째 방법은 CSS 필터 방법입니다. 다음은 외국 사이트에서 번역한 것입니다.

다음과 같이 새 CSS 스타일을 만듭니다.

#항목 {
너비: 200px;
높이: 200px;
배경: 빨간색;
}

새 div를 만들고 이전에 정의한 CSS 스타일을 사용합니다.

여기에 lang 속성을 본문 성능에 추가하세요. 중국어는 zh입니다.

이제 div 요소에 대해 다른 스타일을 정의합니다.

*:lang(en) #항목{
배경:녹색!중요;
}

이는 원본 CSS 스타일을 !important로 덮어쓰기 위해 수행됩니다. IE7.0에서는 :lang 선택기가 지원되지 않으므로 이 문장에는 아무런 영향을 미치지 않습니다. 따라서 IE6.0에서는 동일한 효과가 달성됩니다. 불행히도 Safari는 이 속성을 지원하지 않으므로 다음 CSS 스타일을 추가해야 합니다.

#item:비어 있음 {
배경: 녹색!중요
}

:empty 선택기는 CSS3 사양입니다. Safari는 이 사양을 지원하지 않지만 이 요소가 존재하는지 여부에 관계없이 이제 IE 버전이 아닌 브라우저에 녹색이 표시됩니다.

IE6 및 FF와의 호환성을 위해 이전 !important를 고려할 수 있습니다. 개인적으로는 간단하고 호환성이 더 좋은 첫 번째를 선호합니다.