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; //이 문장이 핵심입니다}
위 내용은 CSS 브라우저 호환성 문제 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!