CSS 브라우저 호환성 문제 설정

CSS와 브라우저의 호환성은 때때로 사람들에게 골칫거리가 될 수 있습니다. 아마도 기술과 원리를 이해하면 인터넷에서 IE7, 6 및 Fireofx의 호환성 방법을 수집하여 정리했을 것입니다. web2.0에서는 xhtml 형식으로 코드를 작성해 보시기 바랍니다. DOCTYPE은 CSS 처리에 영향을 미치므로 W3C 표준으로

CSS 팁을 추가해야 합니다.

1.p의 수직 중심 문제

Vertical-align:middle; 줄 간격을 전체 p line-height:200px와 같은 높이로 늘립니다. 그런 다음 텍스트를 삽입하면 세로로 가운데 정렬됩니다. 단점은 줄 바꿈 없이 내용을 조절해야 한다는 점

2. 여백이 2배로 늘어나는 문제
 
p가 float로 설정되면 IE에서 설정된 여백이 두 배가 됩니다. ie6에 존재하는 버그입니다. 해결책은 이 p에 display:inline
을 추가하는 것입니다. 예:
<#p id="imfloat"> 해당 CSS는
#IamFloat{ 
부동:왼쪽
margin:5px;/*IE에서는 10px로 이해됨*/
display:inline;/*IE에서는 5px로 이해됩니다*/}


3. 플로팅에 의해 생성되는 이중 거리 즉  
#box{ float:left; width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. //float를 무시합니다. block과 inline의 두 요소에 대해 자세히 설명하겠습니다. block 요소의 특징은 항상 새 줄에서 시작하고 높이, 너비, 줄 높이, 여백을 모두 제어할 수 있다는 것입니다(블록 요소). 인라인 요소는 이고 다른 요소는 같은 줄에 있으므로 제어할 수 없습니다(삽입 요소).
#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. display:inline; //동일한 행에 정렬하는 효과를 얻습니다.


4 IE와 너비 및 높이 질문
IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반 너비와 높이를 처리합니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서. 
예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음과 같이 하세요.
#box{ 너비: 80px;}html>body #box{ 너비: 자동; 높이: 자동; 최소 높이: 35px;}


5. 페이지의 최소 너비
  min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정하여 레이아웃이 항상 정확할 수 있도록 하는 매우 편리한 CSS 명령입니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령을 IE에서도 사용할 수 있게 하려면 태그 아래에

를 넣은 다음 p에 대한 클래스를 지정한 다음 CSS를 다음과 같이 디자인하세요.
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
첫 번째 최소 너비는 정상이지만 두 번째 줄의 너비는 IE에서만 인식되는 Javascript를 사용하므로 HTML 문서가 덜 형식화됩니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.


6.p Floating IE 텍스트로 인해 3픽셀 버그가 발생함
왼쪽 개체는 플로팅되고 오른쪽 개체는 외부 패치의 왼쪽 여백을 사용하여 위치가 지정됩니다.
#상자{플로트:왼쪽:800px;}
#왼쪽{ 부동:왼쪽:50%;}
#오른쪽{ 너비:50%;}
*html #left{ margin-right:-3px; //이 문장이 핵심입니다}

7. IE 숨바꼭질 문제


p 애플리케이션이 복잡할 경우, 각 열에 몇 개의 링크가 있는데, 이때 숨바꼭질 문제가 쉽게 발생합니다.  일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다. 해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하십시오. 페이지 구조를 최대한 단순하게 유지하세요.

8. 플로트 p 클로저, 적응형 높이;①예: <#p id=”floatA” ><#p id=”floatB” ><#p id=”NOTfloatC” >NOTfloatC 여기서 번역을 계속하고 싶지 않지만 번역을 진행하고 싶습니다. 아래 행. (floatA 및 floatB의 속성은 float:left;로 설정되었습니다.)
이 코드는 IE에서는 잘 작동하지만 문제는 FF에 있습니다. 그 이유는 NOTfloatC가 부동 레이블이 아니므로 부동 레이블을 닫아야 하기 때문입니다. <#p class="NOTfloatC"> 사이에 <#p class="clear">를 추가합니다. 부동 속성이 있는 p 형제 사이에는 중첩 관계가 있을 수 없습니다. 예외가 발생합니다. 그리고 다음과 같이 클리어 스타일을 정의합니다: .clear{clear:both;}

② 외부 래퍼 p로서 높이가 자동으로 조정되도록 고정 높이를 설정하지 마십시오. 플로트 상자가 포함된 경우 래퍼에 숨겨지며 IE에서는 자동 높이 조정이 유효하지 않습니다. 이 때 트리거되는 레이아웃 개인 속성(사악한 IE!)은 Zoom:1;을 사용하여 수행될 수 있으므로 호환성이 달성됩니다.
예를 들어 래퍼는 다음과 같이 정의됩니다.
.colwrapper{ 오버플로:숨김; 확대/축소:1; 여백:5px 자동;}

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

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

그런 다음 왼쪽에 플로트를 삽입하고 너비는 100% p가 되어 문제를 해결합니다

④범용 플로트 폐쇄(매우 중요!)
클리어 플로트의 원리는 [구조적 마크업 없이 플로트를 지우는 방법]을 참조하세요. Global CSS에 다음 코드를 추가하고 닫아야 하는 p에 class="clearfix"를 추가해 보았습니다.
/* 수정 지우기 */
.clearfix:after { content:"."; 디스플레이:블록; 클리어:모두; 숨김 } .clearfix { 디스플레이:인라인 블록 }
/* IE Mac에서 숨기기 */
.clearfix {디스플레이:블록;}
/* IE Mac에서 숨기기 종료 */
/* 클리어픽스 끝 */
또는 다음과 같이 설정하세요: .hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시}

위 내용은 CSS 브라우저 호환성 문제 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!