파이어 폭스와 IE에서 CSS의 호환 코드를 요약

주요 문법 호환 문제, CSS를 쓰기 요약 CSS 파이어 폭스 브라우저와 IE 브라우저 코드의 호환성, 코드, 호환, 다른 다양 한 브라우저 버그, 보고, 몇 가지 도움말을 보낼 아마도 유용.
CSS 팁

1, Div 수직 센터 문제

수직 정렬: 중간; 전체 Div 라인으로 높은 줄 간격 증가-높이: 200px; 다음 텍스트를 삽입 하 고 수직 센터. 단점은 콘텐츠를 제어 하는 라인을 변경 하지 마십시오

2. 더블 마진의 질문

Div float로 설정 IE 아래 여백 설정을 두 번 것입니다. 이것은 i e 6은 버그 이다. 디스플레이: 인라인; div에 추가 하는 솔루션은
예를 들어:
< #div id = "Imfloat" >
해당 CSS는
#IamFloat 없음
플 로트: 왼쪽;
Margin: 5px; / * 즉 이해로 10px * /
디스플레이: 인라인; / * 즉 5px *로 이해 될 것 /}

3. 두 배 거리 즉 부동

#box {플 로트: 왼쪽; 너비: 100px; 여백: 0 0 0 100px; 이 경우에, IE는 200px 거리 디스플레이: 인라인;을 생산할 예정 이다 무시를 부동 하 게}
여기는 블록 및 인라인 두 요소의 세부: 블록 요소 항상 새로운 라인, 높이, 너비, 행 높이 시작 하 여 특징, 여백 제어할 수 있습니다 (요소 차단); 인라인 요소는 통제 특징 이다 (인라인 요소) 다른 요소; 같은 줄에

4, 즉 고의 너비와 높이 문제

IE의 분-정의 인식 하지 못합니다 하지만 사실 분으로 정상적인 폭과 높이 취급. 이 문제는 경우에 너비와 높이,이 두 값에 일반 브라우저 변경 되지 것입니다, 분-너비와 분-높이, 즉 아래 설정 되지 않은 너비와 높이 경우에 큰.
예를 들어 배경 그림을 설정 하려면이 폭이 더 중요 합니다. 이 문제를 해결 하려면이 수행할 수 있습니다.
#box {폭: 80px; 높이: 35px;} Html > 바디 #box {폭: 자동; 높이: 자동; 민-폭: 80px, 분-높이: 35px;}

5, 페이지의 최소 폭

민 폭 지정 요소를 최소한의 이어야 한다 또는 특정 너비 보다 작은 레이아웃 항상 수 있도록 수정 하는 편리한 CSS 명령입니다. 그러나 IE이 인식 하지 않습니다 그리고 실제로 최소 폭. 이 명령을 사용할 수 있도록 인터넷 익스플로러에서 < div > < 몸 > 탭을 넣어 다음, Div에 대 한 클래스를 지정 하 고 수 다음 CSS 디자인:
#container {민-폭: 600px 폭: 식 (Document.body.clientWidth < 600?) "600px": "자동");
첫 번째 분 폭 정상 이지만 선 2 사용 하는 자바 스크립트, IE만 인식, 당신의 HTML을 만드는 폭 덜 공식적인 문서. 실제로 JavaScript의 판단을 통해 최소 폭을 달성 한다.

6, div 부동 IE 텍스트 생성 3 픽셀 버그

부동, 오른쪽 왼쪽된 여백 찾으려고 외부 패치 개체의 왼쪽 텍스트 내에서 오른쪽 개체 3px 간격 남아 있을 것입니다.
#box {플 로트: 왼쪽; 너비: 800px;}
#left {플 로트: 왼쪽; 너비: 50%;}
#right {폭: 50%;}
* html #left {여백-오른쪽:-3px; //This 문장 열쇠입니다}
< div id = "상자" >
< div id = "왼쪽" >< / div >
< div id = "오른쪽" >< / div >
< / div >

7, IE 숨기기 문제

Div 응용 프로그램이 복잡 한 경우 각 열, div에 있는 일부 링크 되며에이 시간 숨기기과 추구 하는 경향이 있습니다.
일부 콘텐츠 나타나지 않습니다 마우스 선택 하는 때이 지역 페이지에 발견 된다. 해결 방법: 사용 라인 높이 특성 #layout 또는 사용에 대 한 고정 높이 너비를 #layout. 페이지 구조는 가능한 한 간단.

8, 폐쇄 div를 부동, 부동, 적응형 높이; 취소

예 ①: < #div id = "Floata" >< #div id = "FLOATB" >< #div id "NOTFLOATC" = > 여기 NOTFLOATC 하지 않으려면 계속 이동 하지만가 고 싶어요. (여기서 Floata, FLOATB 속성은 이미 플 로트: 왼쪽으로 설정
이 코드는 IE와 아무 문제, 문제는 ff. 이유는 NOTFLOATC은 float 레이블 및 플 로트 라벨을 폐쇄 해야 합니다. 에 < #div 클래스 = "FLOATB" >< #div 클래스 = "NOTFLOATC" > 플러스 < #div 클래스 "지우기" = >이 div의 위치에 주의 해야 합니다 또한, float 속성을 가진 두 명의 Div 형제와 중첩된 관계 있어야 또는 예외가 발생 합니다. 이 스타일을 다음과 같이 분명히 정의:. 취소 {취소: 둘 다;

② 외부 래퍼 div 높이 내부 래퍼에 자동으로 적응할 수 있도록 죽은 높이 설정 하지 않으면 서 추가 오버플로우: 숨겨진; Float, IE 잘못에 자동 적응의 높이 상자에 포함 되어 있으면이 시간 한다 방 아 쇠 즉 레이아웃 전용 속성 (즉 아 악!). 확대: 1, 호환성 달성 되도록 할 수 있습니다.
예를 들어 래퍼는 다음과 같이 정의 됩니다.
. colwrapper {오버플로: 숨겨진 줌: 1; 여백: 5px 자동;

③ 인쇄 술에 대 한, 우리가 사용 하는 가장 일반적인 CSS 설명은 아마 플 로트: 왼쪽. 가끔은 우리가 예를 들어 N 열 플 로트 div 뒤에 통합된 배경 할 필요가:
< div id = "페이지" >
< div id = "왼쪽" >< / div >
< div id = "센터" >< / div >
< div id = "오른쪽" >< / div >
< / div >
예, 우리는 배경을 설정 하려는 파랑 페이지의 백그라운드를 달성 하기 위해 모든 3 열의 색상 블루, 하지만 우리 찾을 것입니다 왼쪽, 아래로 뻗어 중심과 높이 실제로 저장 하는 페이지의 오른쪽으로 문제가 오는 것 페이지는 float 속성 때문에 우리의 페이지는 중심으로 그리고 우리는 이것을 해결 한다 그래서 float로 설정할 수 없습니다.
< div id = "페이지" >
< div id = "bg" 스타일 = "플 로트: 왼쪽; 너비: 100%" >
< div id = "왼쪽" >< / div >
< div id = "센터" >< / div >
< div id = "오른쪽" >< / div >
< / div >
< / div >
왼쪽 float을 포함 하 고 너비는 100 %div 솔루션

④ 보편적인 부동 폐쇄 (매우 중요!)
명확한 플 로트의 원리에서 클래스 추가 참조 [하지 않고 구조적 마크업 수레를 취소 하는 방법], 다음 코드를 추가 합니다 글로벌 CSS div 폐쇄가 될 필요가 있는 "플렉스" = 입증 된.
/ * 수정 취소 /
. 플렉스: 후 {콘텐츠: "."; 디스플레이: 블록; 높이: 0 일반: 모두; 가시성: 숨겨진;}
. 플렉스 {디스플레이: 인라인-블록}
/ * IE 맥에서 숨기기 /
. 플렉스 {디스플레이: 블록}
/ * 종료 IE 맥에서 숨기기 /
/ *의 구현은 끝 * *
또는이 설정을:. hackbox {디스플레이: 테이블; //Display 개체 블록 요소 레벨 테이블

11, 높이 적합 하지 않습니다.

내부 개체의 높이 변경 외부 높이 하지 자동으로 조정, 내부 개체 여백 또는 paddign를 사용 하는 경우에 특히 높이 적응 되지 않습니다.
경우:
#box {배경-색상: #eee;}
#box p {여백-가기: 20px; 여백-하단: 20px; 텍스트-정렬: 센터;}
< div id = "상자" >
< P > 콘텐츠 p 개체 </p >
< / div >
해결 방법: 2 빈 div 개체 CSS 코드 P 개체를 추가:. 1 {높이: 0px; 오버플로우: 숨겨진;} Div에 테두리 특성을 추가 또는

12, 그림의 생산 격차는 왜 i e 6에서

HTML의 레이아웃을 변경 하 여이 버그를 해결 하는 방법의 수 있다 또는 디스플레이: 블록 또는 설정에 대 한 그림을 설정 하 여 수직 정렬 특성 수직 정렬: 가기 | 하단 | 중간 | 텍스트 아래쪽 해결 될 수 있다.

13. 텍스트 입력된 상자 하는 방법

게다가 수직 정렬: 중간;
< 스타일 형식을 "Text/css" = >
<!-
입력된 없음
폭: 200px;
높이: 모양이;
국경: 1px 단단한 빨강;
수직 정렬: 중간;
}
->
</스타일 >

14. 웹 표준에서 정의 ID와 클래스의 차이점은 무엇입니까?

A. 웹 표준 Div id 같은 중복 Id를 허용 하지 않습니다 = "AA" 허용 하지 않습니다 반복 2 번, 그리고 클래스 정의 클래스 이론적으로 무한히 반복 될 수 있다, 그래서 필요를 참조 하도록 여러 참조의 정의 사용할 수 있는 그.

2. 우선 문제의 특성에 대 한
우선 순위 ID는 클래스 보다 높은 봐 위의 예제에서

3. 편리한 JS 및 다른 클라이언트-사이드 스크립트, 페이지에서 개체를 스크립팅 하려는 경우 탐색 페이지 요소 사용 플러스 그것을 찾기 위해 지정 된 특정 특성 그렇지 않으면에 ID를 정의할 수 있습니다,이 상대적으로 시간 자원, 간단한 아이디 보다 훨씬 적은 낭비입니다

15, 줄임표 표시 방법의 길이 초과 하는 콘텐츠에 리

이 방법은 IE와 op 브라우저에 적용

< 스타일 형식을 "Text/css" = >
<!-
리 없음
폭: 200px;
흰색-공간: 넘김;
텍스트-오버플로: 줄임표;
-o-텍스트-오버플로: 줄임표;
오버플로우: 숨겨진;
}

->
</스타일 >

왜 웹 표준 IE는 스크롤 바 색상 설정 하지 수 16

Html 본문을 대체 하는 솔루션은
<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 엄격한 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< 메타 http-equiv = "content-type" C / >
< 스타일 형식을 "Text/css" = >
<!-
HTML 없음
스크롤바-얼굴-색상: #f6f6f6;
스크롤 막대-하이라이트-색상: #fff;
스크롤바-그림자-색상: #eeeeee;
스크롤 막대-3dlight-색상: #eeeeee;
스크롤바-화살표-색상: # 000;
스크롤바-트랙-색상: #fff;
스크롤 막대-darkshadow-색상: #fff;
}
->
</스타일 >

17, 왜 컨테이너의 1px 높이 정의 하지 수

I e 6이이 문제 때문에 같은 다양 한 방법으로의 해결책에 의해 발생 하는 기본 행 높이: 오버플로: 숨겨진 | 확대/축소: 0.08 | 라인-높이: 1px

18, 레이어 위에 플래시 표시 하 게 하는 방법

플래시 투명 하 게 설정 하는 솔루션은
< param name = "wmode" 값 = "Transparent" / >

19. 브라우저에 수직으로 레이어를 정렬 하는 방법

여기 우리는 % 절대 위치, 외부 패치에 대 한 음수 값 및 음수 값의 너비 높이 2로 나눈 것을 사용 합니다.
< 스타일 형식을 "Text/css" = >
<!-
div 없음
위치: 절대;
탑: 50%;
lef:50%;
여백:-100px 0 0-100px;
폭: 200px;
높이: 200px;
국경: 1px 단단한 빨강;
}
->
</스타일 >