집 > 기사 > 웹 프론트엔드 > Firefox와 IE 브라우저 간 CSS 스타일 시트의 차이점

Firefox와 IE 브라우저 간 CSS 스타일 시트의 차이점

黄舟원래의: 2016-12-14 15:37:231036검색

Firefox ie6 IE7용 CSS 스타일

이제 대부분이 !important로 해킹되었습니다. ie6 및 Firefox 테스트의 경우 정상적으로 표시될 수 있지만 ie7에서는 !important를 올바르게 해석할 수 있습니다. 요청하면 페이지가 표시됩니다! "*+Html"을 사용하는 IE7용 좋은 해킹을 찾았습니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다.

이제 다음과 같이 CSS를 작성하세요.

#1 { color: #333 } /* Moz */
* html #1 { color: #666 } /* IE6; */
*+html #1 { color: #999; } /* IE7 */

그러면 글꼴 색상은 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #666으로 표시됩니다. 글꼴 색상은 #999로 나타납니다.

2 CSS 레이아웃의 센터링 문제

주요 스타일 정의는 다음과 같습니다.

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT : auto; MARGIN-LEFT: auto; }

설명:

먼저 TEXT-ALIGN을 정의합니다. 이는 IE의 경우 상위 요소 내의 콘텐츠가 중앙에 있음을 의미합니다. 이 설정이면 충분합니다.

그러나 Mozilla에서는 중앙에 위치할 수 없습니다. 해결책은 하위 요소 정의를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "를 추가하는 것입니다.

이 방법을 사용하여 전체 페이지를 중앙에 맞추려면 각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하는 한 여러 div를 순서대로 분할할 수 있습니다.

상자 모델에 대한 3가지 다른 해석.

#box{
width:600px;
//for ie6.0- width:500px;
//for ff+ ie6.0
}
#box{
width:600px!important
//ff
width:600px;
width /**/:500px;
//ie6.0-
}

4 부동에 의해 생성된 이중 거리 ie

#box{ float:left width: 100px; margin:0 0 100px; 이 경우 IE는 200px 거리를 생성합니다. display:inline; //플로팅 요소 무시}

여기에는 블록과 인라인의 두 요소가 있습니다. 블록 요소의 특징은 다음과 같습니다. 새 줄, 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있습니다(블록 요소). Inline 요소의 특징은 다음과 같습니다. 다른 요소와 같은 줄에 있으며... 제어할 수 없습니다( Inline 요소). );

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있음 display:inline; //동일한 행에 정렬되는 효과 달성 diplay:table;

5 IE와 너비 및 높이의 문제

IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반 너비와 높이를 처리합니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서. 예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; min-width: min- height: 35px;}

6 페이지의 최소 너비

min-width는 요소가 최소이거나 특정 너비보다 작지 않아야 함을 지정할 수 있는 매우 편리한 CSS 명령입니다. 레이아웃이 항상 올바른지 확인합니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면 태그 아래에

를 넣은 다음 div에 대한 클래스를 지정하면 됩니다.

그런 다음 CSS는 다음과 같이 설계됩니다.

# 컨테이너{

min-width: 600px;
width:e 최소 너비는 정상이지만 2행의 너비는 IE에서만 인식되는 javascript를 사용하므로 HTML도 생성됩니다. 덜 형식적인 문서. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.

7 부동 지우기

.hackbox{

display:table

//블록 요소 수준에서 객체를 테이블로 표시

}

또는

.hackbox{

clear:both;

}

또는 추가: after(의사 객체) 객체 뒤에 발생하는 콘텐츠를 설정하며 일반적으로 함께 사용됩니다. 콘텐츠 포함, IE 이 의사 개체는 Ie 브라우저에서 지원되지 않으며 지원되지 않으므로 IE/WIN 브라우저에 영향을 미치지 않습니다. 이게 제일 귀찮습니다

......#box:after{

content: ".";

display: block;

height: 0;

clear: 모두;
가시성: 숨김, 오른쪽 개체의 텍스트는 왼쪽에서 3px 간격을 갖습니다.

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

>9 속성 선택기(호환 가능한 것으로 간주할 수 없습니다. 숨겨진 CSS의 버그입니다.)

p[id]{}div[id]{}

p[id]{}div[id]{ }

IE6.0 및 그 이하 버전에서는 숨겨져 있습니다.

속성 선택기와 하위 선택기의 범위는 여전히 다릅니다. 예를 들어 p[id]에서는 속성 선택기의 범위가 상대적으로 넓습니다. ], ID가 있는 모든 p 태그는 동일한 스타일입니다.

10 IE 숨기기 문제

div 애플리케이션이 복잡할 때 각 열에 일부 링크가 있으며 숨김 DIV에서는 탐색 문제가 쉽게 발생할 수 있습니다.

일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다.

해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하세요. 페이지 구조를 최대한 단순하게 유지하세요.

11 높이 부적합

높이 부적합은 내부 객체의 높이가 변경되면 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다. 특히 내부 객체가

여백 또는 여백을 사용하는 경우에는 더욱 그렇습니다. 패디 시간. 예:

p 개체의 콘텐츠

CSS ：

#box {Background-color:#eee; }

#box p {margin-top: 20px; margin-bottom: 20px;

해결책: P 개체 위와 아래에 두 개의 빈 div 개체를 추가합니다(.1{height:0px;overflow:hidden;}). 또는 DIV에 테두리 속성을 추가합니다.

더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

성명：

이전 기사：DIV+CSS의 텍스트 내용을 레이아웃_센터 배경 이미지_센터 중앙에 배치합니다.다음 기사：DIV+CSS의 텍스트 내용을 레이아웃_센터 배경 이미지_센터 중앙에 배치합니다.

Firefox와 IE 브라우저 간 CSS 스타일 시트의 차이점

관련 기사