CSS와 브라우저의 호환성은 때때로 사람들에게 골칫거리가 될 수 있습니다. 아마도 기술과 원리를 이해하면 인터넷에서 IE7, 6 및 Fireofx에 대한 호환성 팁을 수집하여 정리하는 것이 어렵지 않을 것입니다. web2.0으로 전환하려면 xhtml 형식으로 코드를 작성해 보시기 바랍니다. DOCTYPE은 CSS 처리에 영향을 미치므로 W3C 표준에 따라 DOCTYPE 문을 추가해야 합니다.
CSS 팁
1.div의 수직 중심 문제
Vertical-align:middle; 줄 간격을 전체 DIV line-height:200px와 동일한 높이로 늘립니다. 그런 다음 텍스트를 삽입하면 세로로 가운데 정렬됩니다. 단점은 내용을 제어해야 하고 다른 줄로 포장하지 않아야 한다는 것입니다.
2. 마진이 두 배로 늘어나는 문제
부동 소수점으로 설정된 div에 설정된 여백은 IE에서 두 배가 됩니다. ie6에 존재하는 버그입니다. 해결책은 이 div 안에 display:inline;을 추가하는 것입니다.
예를 들어:
<#div id=”imfloat”>
해당 CSS는
#imfloat{
부동:왼쪽;
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; 높이: 35px;}html>body #box{ 너비: 자동; 최소 너비: 80px;}
5. 페이지의 최소 너비
min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정하여 레이아웃이 항상 정확할 수 있도록 하는 매우 편리한 CSS 명령입니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. IE에서도 이 명령을 사용할 수 있게 하려면 <body> 태그 아래에 <div>를 넣은 다음 div에 대한 클래스를 지정한 다음 CSS를 다음과 같이 디자인할 수 있습니다.
#container{ 최소 너비: 600px; 너비:표현(document.body.clientWidth < 600? "600px": "auto" );}
첫 번째 최소 너비는 정상이지만 두 번째 줄의 너비는 IE에서만 인식되는 Javascript를 사용하므로 HTML 문서가 덜 형식화됩니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.