CSS 호환성 작성 방법 예시 설명

일반 브라우저 커널 엔진 및 특정 애플리케이션:

Trident: IE;

Gecko: Firefox;

웹킷: Safari, Google Chrome, Travel 3, Cheetah, Baidu;

Presto: Opera - Opera mini

쓰기 순서: firefox, IE8, IE7, IE6

IE6:*,_

IE7:*,+

IE8:9,

IE: ie7 이하 버전은 둥근 모서리를 지원하지 않습니다.
 FF: -moz-border-radius:4px

브라우저 버그
IE의 이중 여백 버그

부동으로 설정된 div는 IE에서 설정된 여백을 두 배로 늘립니다. ie6에 존재하는 버그입니다.

해결책: 디스플레이 추가:inline;

Floating

DIV 부동 IE 텍스트는 3픽셀 버그를 생성합니다.
왼쪽 개체는 부동이고 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다. 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다. 개체 내의 텍스트는 왼쪽에서 3px 간격으로 배치됩니다.

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

;div id="left">

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

IE의 레이아웃 개인 속성

높이를 자동으로 조정하려면 높이를 설정하지 마세요. 플로트 상자가 포함된 경우 래퍼에 Overflow:hidden을 추가하세요. 높이는 자동으로 IE에서는 적용이 유효하지 않습니다. 이때 IE의 레이아웃 개인 속성이 트리거되어야 합니다(사악한 IE!). 호환성을 확보하려면 Zoom:1을 사용할 수 있습니다.

.colwrapper{ Overflow:hidden; Zoom:1; margin:5px auto;}

Typesetting

우리가 가장 많이 사용하는 CSS 설명은 아마도 n 열에 필요할 것입니다. float div 뒤의 배경, 예:

세 열의 배경색이 모두 파란색이 되도록 페이지의 배경을 파란색으로 설정하려고 합니다. 색상의 목적은 다르지만 왼쪽 중앙 오른쪽이 아래쪽으로 늘어나면 페이지가 실제로 동일한 높이를 유지한다는 것을 알 수 있습니다. 페이지가 부동 속성이 아니고 페이지를 부동 속성으로 설정할 수 없기 때문에 문제가 발생합니다. 따라서 할아버지가 되도록 상위 요소 페이지를 추가합니다.

Height unsuitable

Height unsuitable은 내부 객체의 높이가 변경될 때 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다. 내부 객체 margin이나 paddign을 사용할 때. 예: #box { }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center;

p 개체

의 콘텐츠
해결 방법: P 개체 위와 아래에 2개의 빈 div 개체를 추가합니다. .1{height:0px;overflow:hidden;} 또는 DIV 테두리에 추가합니다. 재산.