HTML 및 CSS의 일반적인 브라우저 호환성 문제-CSS 튜토리얼-php.cn

우리는 HTML 개발에 반드시 CSS를 사용할 것이지만 때로는 개발이 생각만큼 원활하지 않을 때가 있습니다. 예를 들어 html과 css의 일반적인 브라우저 호환성 문제인 경우 이 브라우저 호환성 문제를 해결하는 방법을 이 섹션에서 알려드리겠습니다.

1. 중앙 정렬 문제

IE에서는 기본적으로 div의 콘텐츠가 중앙에 정렬되지만 FF는 기본적으로 왼쪽 정렬됩니다.

margin: 0 auto;

로그인 후 복사

2 높이 문제

두 개의 div가 위에 정렬됩니다. 기타 또는 중첩, 위 div의 높이를 설정합니다. div의 실제 콘텐츠가 설정된 높이보다 크면 FF에서는 두 div가 겹치지만 IE에서는 아래쪽 div가 위쪽 div를 위한 공간을 자동으로 만듭니다. 따라서 레이어가 겹치는 것을 방지하려면 높이를 적절하게 제어해야 합니다. 아니면 높이를 쓰지 않고 자동으로 조정되도록 해야 합니다. 그러나 이 div의 모든 첫 번째 수준 요소가 부동 상태인 경우에는 다음이 필요합니다. to div 블록 끝에 닫고 닫기 전에 바닥이 움푹 들어간 빈 div를 추가합니다. 해당 CSS는 다음과 같습니다.

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

로그인 후 복사

3.clear:both

float의 영향을 받지 않으려면; , div에 둘 다
라고 적으세요.

4. IE 부동 여백으로 인한 이중 거리

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

로그인 후 복사

5. 패딩 문제

FF 패딩을 설정한 후 div는 높이와 너비를 늘리지 않지만( * 표준 XHTML1.0 정의 dtd는 일관성이 있는 것 같습니다. 높이 제어가 적절하거나 높이:100%를 사용하여 너비를 줄이십시오. 그러나 실제 경험에 따르면 일반적으로 패딩 사이에 큰 차이가 없습니다. FF 및 IE의 경우 div의 실제 너비 = 너비 + 패딩이므로 div의 전체 너비가 기록되며 패딩, 너비는 실제 원하는 너비에서 패딩을 뺀 값으로 정의됩니다.

6. div가 중첩될 때 y축 패딩 및 마린 문제

FF의 y축 하위 div에서 상위 div까지의 거리는 상위 패딩 + 하위 마린입니다

In IE, y축의 자식 div에서 부모 div까지의 거리 거리가 부모 패딩과 자식 marign 중 더 큽니다

FF에서 y축의 부모 패딩=0이고 테두리=0일 때, 자식 div에서 부모 div까지의 거리는 0이고 자식 marign은 부모 div 외부에서 작동합니다

7. 패딩, 여백, 높이, 너비에 대한 어리석은 솔루션

메서드가 아니라 기술입니다.

표준 헤더를 잘 작성하세요

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

로그인 후 복사

8. List 클래스

1. FF에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있습니다

먼저 ul {margin:0;padding: 0;}

2. ul 및 ol 목록의 들여쓰기 문제. ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일을 다음과 같이 작성해야 합니다.

9. 디스플레이 클래스(디스플레이: 블록, 인라인)

1. 디스플레이: 블록, 인라인 두 요소

디스플레이: 블록; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. 같은 행에 배열되는 효과 달성

display:table; //FF의 경우 테이블 효과 시뮬레이션

display:block 블록 요소, 요소 특징은 다음과 같습니다.

항상 새 줄 높이에서 시작합니다. 줄 높이, 위쪽 및 아래쪽 여백은 모두 제어할 수 있습니다. 너비가 설정되지 않는 한 너비는 기본적으로 컨테이너의 100%입니다.