CSS 호환 디버깅의 일반적인 상황과 해당 방법

1. CSS HACK

다음 두 가지 방법으로 현재 거의 모든 HACK을 해결할 수 있습니다.

1, !important

IE7의 !important 지원으로 ! method는 이제 IE6 HACK에만 해당됩니다. (작성에 주의하세요. 선언 위치가 미리 나와 있어야 한다는 점을 기억하세요.)

#wrapper

{

너비: 100px!중요;

너비: 80px;

}

2, FireFox용 IE6/IE77

*+html 및 *html은 Firefox에서 지원되지 않는 IE 전용 태그입니다. 그리고 *+html은 IE7 전용 태그입니다.

{

#wrapper { 너비: 120px }

*html #wrapper { 너비: 80px;}

*+html #wrapper { 너비 : 60px;}

}

참고:

*+html HACK IE7은 HTML 상단에 다음 명령문이 있는지 확인해야 합니다.

"">

2. 범용 플로트 클로저

정보 클리어 플로트의 원리는 [구조적 마크업 없이 플로트를 지우는 방법]에서 확인할 수 있습니다.

글로벌 CSS에 다음 코드를 추가하고 클래스를 추가합니다= 닫아야 하는 div에 대한 "clearfix"는 항상 작동합니다.

.clearfix:after

{

콘텐츠: ".";

디스플레이:블록 ;

높이:0;

클리어:모두;

가시성: Hidden;

}

.clearfix

{

display:inline-block;

}

.clearfix {display:block;}

3.

1. FF 아래의 div에 패딩을 설정하면 너비와 높이가 증가하지만 IE No. (!important로 해결 가능)

2, 센터링 문제

1) 수직 중앙 정렬. line-height를 현재 div와 동일한 높이로 설정한 다음, Vertical-align: middle을 사용합니다.(콘텐츠를 감싸지 않도록 주의하세요.)

2). margin: 0 auto;(물론 만능은 아닙니다)

3. a 태그의 내용에 스타일을 추가해야 하는 경우, display: block을 설정해야 합니다(내비게이션 태그에서 공통)

4. FF와 IE의 BOX에 대한 이해 차이로 인해 2px 차이가 발생하고 IE에서 div의 여백이 두 배로 늘어나는 등의 문제가 발생합니다.

5, ul 태그에 목록이 있습니다. -style 및 padding은 FF에서 기본적으로 선언하는 것이 불필요한 문제를 피하기 위해 가장 좋습니다. (탐색 태그 및 콘텐츠 목록에서 일반적임)

6, 외부 래퍼로 높이를 설정하지 않습니다. div.hidden을 추가하는 것이 가장 좋습니다.

7, 손 커서 관련: 포인터.

1 CSS 스타일. Firefox ie6 및 ie7의 경우

요즘에는 대부분 해킹에 !important를 사용합니다. ie6 및 Firefox 테스트의 경우 정상적으로 표시될 수 있습니다.

그러나 ie7에서는 !important를 올바르게 해석할 수 있습니다. 필요에 따라 페이지가 표시되지 않습니다! 해킹을 찾았습니다

IE7에 대한 좋은 해킹은 "*+html"을 사용하는 것입니다. 이제 IE7로 탐색하면 문제가 없을 것입니다.

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

#1 { color: #333; }

* html #1 { color: #666; >*+html #1 { color: #999; }

그러면 글꼴 색상은 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #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로 묶지 않는 것이 좋습니다.

각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하면 됩니다.

상자 모델의 3가지 다른 해석

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

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

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

#box{ float:left; width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. //float를 무시합니다. >

block과 inline 두 요소에 대해 자세히 설명하자면 Block 요소의 특징은 항상 새 줄에서 시작하고 높이, 너비, 줄 높이, 여백을 모두 제어할 수 있다는 것입니다(블록 요소). ); 인라인 요소의 특징은 다음과 같습니다: :다른 요소와 같은 줄에...제어할 수 없음(인라인 요소);

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있음 display:inline; // 같은 행에 정렬하는 효과를 얻기 위해 diplay:table;

IE는 min-의 정의를 인식하지 못하지만 실제로는 min-이 있는 것처럼 일반 너비와 높이를 처리합니다. . 이는 큰 문제를 야기합니다.

이 두 값은 일반 브라우저에서 ​​​​변경되지 않습니다. IE에서는 너비와 높이를 전혀 변경하지 않습니다.

예를 들어 배경 이미지를 설정하려면 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음과 같이 하세요.

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

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
也可以直接写成:
#container{ min-width:600px; *width:600px;}
这样就达到不管IE还是FF都是最小宽度为600PX了

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，

所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}

HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

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

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。

例：

p对象中的内容

CSS: #box {배경색:#eee; }

#box p {margin-top: 20px; text-align:center; 🎜>

해결 방법: P 개체 위와 아래에 2개의 빈 div 개체를 추가하세요. CSS 코드: .1{height:0px;overflow:hidden;} 또는 DIV에 테두리 속성을 추가하세요.

다음 방법은 또 다른 관점의 분석 방법입니다.
웹 디자인을 좋아하는 친구들이 공유할 수 있는 브라우저 BUG 처리 방법 정리(일부):
1. Asterisk*
IE에서 할 수 있습니다. *를 인식하지만, FF 등의 표준 브라우저에서는 *를 인식할 수 없습니다.
예: p { color:yellow; *color:red;}
비슷한 것은
+ 더하기 기호
IE만
p{color:red} IE는 파란색을 표시하고 FF는 빨간색을 표시합니다
2.!important
IE6 이하에서는 이 스타일을 무시하고 IE7 FF에서는 이를 지원합니다.
p{color:red !important;color:yellow;}
IE7 FF는 빨간색 IE6 노란색을 표시합니다.
여기서 !important 메서드는 위 형식을 따른 후 IE6 이하에서만 무시된다는 점에 유의하세요. 스타일 가중치를 늘리는 다른 방법은 보편적으로 사용할 수 있습니다.
3.밑줄.
IE6 이하에서는 이 스타일을 사용하고 다른 사람들은 이를 무시합니다.
p{color:red; _color:blue}
4. 댓글:
p {color:red}; IE6에서는 적용 및 표시가 가능하지만, IE5 이하에서는 처리되지 않으므로 IE5/6에서는 구분이 가능합니다.
5. @IMPORT:
@IMPORT의 URL을 사용하여 표준 사용법인 Style을 가져옵니다. @IMPORT URL("newstyle.css")와 같이 URL에 값을 따옴표로 묶는 것입니다. 이 사용법은 IE5 및 FF 이상의 브라우저에서 지원되므로 IE4 스타일의 별도 처리를 실현할 수 있습니다.
에서 그 외에 또 다른 방법이 있습니다:
@IMPORT URL("noie.css") screen;
Screen은 장치 유형을 지정하는 옵션이며, screen은 화면 표시에 사용되고, print는 인쇄 장치 표시에 사용됩니다. 그러나 IE는 이 방법을 지원하지 않으며 모든 IE 브라우저는 IE와 FF를 구별할 수 있습니다.
6. 속성 선택기: 특정 속성을 가진 객체를 선택하는 데 사용됩니다.
span[class=left]{color:blue}
span[title]{color:red;}
IE6은 지원되지 않습니다. , 그러나 FF에서는 정상적으로 작동하므로 IE와 FF를 별도로 처리할 수 있습니다.
실제 개발에서는 IE와 FF를 별도로 처리해야 하는 경우가 많습니다.
#content{
color:red;
}
[xmlnx] #content{
color:blue
}
이 방법은 매우 실용적이어서 필요할 때 친구들에게 자주 사용하는 방법이라고 생각합니다. . 자세한 내용을 게시할 수 있습니다.
7. 하위 객체 선택기:
span>p{color:red}
IE6에서는 지원하지 않으며 IE와 FF를 구별하는 데에도 사용할 수 있습니다
8. #content{ COLOR: Blue;
Voice-Family: ""} "" ";
Voice-Family: Inherit;
COLOR: Red;
}
위의 코드 음성 사용 - 다음 색상은 IE5.5 이하 브라우저에서 구문 분석되지 않으므로 텍스트 색상은 IE6/7/FF에서는 빨간색으로 표시되고 IE5.5 이하 브라우저에서는 파란색으로 표시됩니다. 🎜> 또한 voice-family를 처리하는 또 다른 방법이 있습니다:
#content{
color:red;
voice-family:"}"
color :blue;
}
이 방법을 사용하면 IE6 이하 브라우저와 FF 브라우저에서는 텍스트가 빨간색으로 표시되고, IE5 이하 브라우저에서는 텍스트가 파란색으로 표시됩니다!
9. 이스케이프 속성
p{width:200px;}
IE5.5 이하는 무시됩니다. 참고: 백슬래시 문자는 0-9 또는 문자 a-f 앞에 올 수 없습니다.
10. IE의 조건부 주석
1. 조건부 주석 소개
IE의 조건부 주석(조건부 주석) IE 버전에서는 구별이 뛰어납니다. IE와 non-IE의 능력으로 WEB 디자인에서 일반적으로 사용되는
해킹 방법입니다.
조건부 주석은 IE5 이상에서만 사용할 수 있습니다.
IE가 여러 개 설치된 경우 조건부 주석은 IE 최신 버전을 기준으로 작성됩니다.
조건부 주석의 기본 구조는 HTML 주석()과 동일합니다. 따라서 IE 이외의 브라우저는 이를 일반
주석으로 처리하고 완전히 무시합니다.
IE는 if 조건을 사용하여 일반 페이지 콘텐츠처럼 조건부 주석의 콘텐츠를 구문 분석할지 여부를 결정합니다.
2. 조건부 주석 속성
gt : 보다 큼, 조건부 버전을 제외하고 조건부 버전 위의 버전 선택
lt : 미만, 조건부 버전을 제외하고 조건부 버전 아래의 버전 선택
gte : 크거나 같음, 조건부 버전을 포함하여 조건부 버전 위의 버전 선택
lte: 작거나 같음, 조건부 버전 아래의 버전 선택, 조건부 버전 포함
: 모든 버전 선택 조건부 버전 제외, 높음이나 낮음에 관계없이
3개, 조건부 주석 사용 방법
코드의 를 영어에서 해당하는 보다 크거나 작은 기호로 바꾸세요.
IE5.5에서만 표시됩니다


;
다음 코드는 IE가 아닌 브라우저에서 실행되는 조건부 주석입니다.

Internet Explorer 버전 6을 사용 중이거나 IE가 아닌 브라우저