웹 프론트엔드 CSS 튜토리얼 CSS 브라우저 호환성 문제 해결

CSS 브라우저 호환성 문제 해결

Nov 24, 2016 am 09:22 AM
css

1. !important(제한된 기능)

IE7의 !important 지원으로 인해 !important 메소드는 이제 IE6에서만 호환됩니다. (작성에 주의하세요. 선언 위치는 다음과 같아야 합니다. 미리.)
예:

#example {  
width: 100px !important; /* IE7+FF */  
width: 200px; /* IE6 */  
}
로그인 후 복사

2. CSS HACK 방법(초보도 볼 수 있고 전문가는 그냥 지나칠 수도 있음)

가장 먼저 알아야 할 사항 is:

모든 보기 공통 높이:
IE6 특정 높이: 100px;
IE7 특정*+높이: 100px; IE6, IE7 공유*높이:
IE7, FF 공유 높이: 100px 중요;

예:

#example { height:100px } /* FF */

* html #example height:200px; } /* IE6 */

*+html #example { height:300px } /* IE7 */

다음 방법은 비교적 간단합니다

몇 가지 예:

1. IE6 - IE7+FF

#example {  
height:100px; /* FF+IE7 */  
_height:200px; /* IE6 */  
}
로그인 후 복사
실제로 위에서 언급한 첫 번째 방법을 사용할 수도 있습니다.


#example {  
height:100px !important; /* FF+IE7 */  
height:200px; /* IE6 */  
}
로그인 후 복사
2. IE6+IE7 - FF

#example {  
height:100px; /* FF */  
*height:200px; /* IE6+IE7 */  
}
로그인 후 복사
3, IE6+FF - IE7

#example {  
height:100px; /* IE6+FF */  
*+height:200px; /* IE7 */  
}
로그인 후 복사
4, IE6 IE7 FF가 다릅니다

#example {  
height:100px; /* FF */  
_height:200px; /* IE6 */  
*+height:300px; /* IE7 */  
}
로그인 후 복사
또는:


#example {  
height:100px; /* FF */  
*height:300px; /* IE7 */  
_height:200px; /* IE6 */  
}
로그인 후 복사
코드 순서가 바뀌면 안 됩니다. 그렇지 않으면 이전의 모든 노력이 물거품이 됩니다. 브라우저가 프로그램을 해석할 때 이름이 동일하면 변수에 값을 할당하는 것처럼 이전 프로그램을 나중 프로그램으로 덮어쓰게 되므로 일반적인 프로그램을 앞에 두고 좀 더 특수한 프로그램을 배치합니다. , 나중에

4의 코드를 설명합니다.

코드를 읽을 때 첫 번째 줄 높이: 100px는 모든 사람에게 공통이며, IE6 IE7 FF는 모두 100px를 표시합니다.

올 때 두 번째 줄에 *height: 300px; FF는 이 속성을 인식하지 못하고 IE6과 IE7은 이를 인식하므로 FF는 여전히 100px를 표시하지만 IE6과 IE7은 첫 번째 줄에서 얻은 높이 속성을 덮어쓰고 둘 다 300px를 표시합니다. 세 번째 줄인 _height:200px에 이르면 IE6에서만 인식하므로 IE6은 두 번째 줄에서 얻은 높이를 덮어쓰고 최종적으로 200px를 표시합니다.
이런 식으로 세 브라우저는 각각 고유한 높이 속성을 갖게 됩니다. 가지고 놀아보세요

아직 이해가 안 되시면 벽에 부딪치러 가셔도 되고, 제가 가셔도 됩니다. 하지만 당신이 가는 게 더 낫습니다.

아, 깜빡할 뻔했어요:

*+html IE7과의 호환성을 위해서는 HTML 상단에 다음 문장이 보장되어야 합니다:

〈!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"〉

3. IE 관련 조건부 주석 사용


〈! --기타 브라우저--〉

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈!--[IE 7인 경우]〉

〈!-- IE7에 적합 --〉

〈link rel="stylesheet" type="text/css" href= "http ://www.php1.cn/">

〈![endif]--〉

〈!--[if lte IE 6]〉

〈 !--IE6 이하에 적합--〉

〈link rel="stylesheet" type="text/css" href="http://www.php1.cn/">

〈![endif]-->

CSS 3세트를 컴파일해야 할 것 같습니다. 아직 사용해본 적은 없습니다.

IE의 if 조건 해킹

1. 〈!--[if !IE]〉〈!--〉 IE를 제외한 모든 항목에서 인식〈!--〈![endif]--〉

2. 〈!--[if IE]〉 모든 IE는 〈![endif]--〉

을 인식할 수 있습니다. 3. 〈!--[if IE 5.0]〉 IE5.0만 〈![endif]-를 인식할 수 있습니다. ->
4. 〈!- -[IE 5인 경우]〉 IE5.0 및 IE5.5만 〈![endif]--〉
5. 〉 IE5.0 및 IE5.0 이상 〈![endif]--〉 〈![endif]--〉 〈!--[IE 6인 경우]〉 〈!--[IE 6인 경우]〉 IE6만 인식 가능 〈![endif]--〉 〈!--[if lt IE 6]〉 IE6 이하 버전에서는 〈![endif]--〉
8 〈!--[if gte IE 6]〉 IE6을 인식할 수 있습니다. 이상 버전에서는 〈![endif]--〉
9를 인식할 수 있습니다. 〈!--[IE 7의 경우]〉 IE7만 〈![endif]--〉
10을 인식할 수 있습니다. if lt IE 7]〉 IE7 이하 버전에서는 〈![endif]--〉
11을 인식할 수 있습니다. 〈!--[if gte IE 7]〉 IE7 이상에서는 〈![endif]--〉를 인식할 수 있습니다. : gt = 크다 그러면 다음보다 큼
> = 〉 초과 기호
lt = 작음 다음 작음
〈 = 〈 미만 기호
gte = 큼 그러면 또는 같음 <보다 크거나 같음
lte = Less Then or Equal Less than orequal to

4. CSS 필터 방식 (저자에 따르면 외국 고전 사이트에서 번역한 것이라고 합니다)

새로 만들기 CSS 스타일은 다음과 같습니다.

새 div를 만들고 이전 정의 CSS 스타일을 사용합니다.

〈div 〉여기에 일부 텍스트〈/div〉
#item { 
width: 200px; 
height: 200px; 
background: red; 
}
로그인 후 복사

추가 여기 본문 표현의 lang 속성, 중국어는 zh:

〈body〉

이제 div 요소에 대해 다른 스타일을 정의합니다.

이 작업은 덮어쓰기로 수행됩니다. !important가 포함된 원래 CSS 스타일입니다. :lang 선택기 ie7.0이 이를 지원하지 않기 때문에 이 문장은 아무런 효과가 없으므로 IE6.0에서도 동일한 효과를 얻을 수 있지만 안타깝게도 Safari는 이 속성을 지원하지 않습니다. 따라서 다음 CSS 스타일을 추가해야 합니다.

#item:empty { 
background: green !important 
}
로그인 후 복사

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。


五、FLOAT闭合(clearing float)

  网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:
1、给父DIV也设上float(不要骂我,我知道是废话)

2、在所有子DIV后新加一个空DIV(不推荐,有些浏览器可以看见空DIV产生的空隙)

比如:

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

〈div〉
〈div〉〈/div〉
〈div〉〈/div〉
〈div〉〈/div〉
〈/div〉

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:

〈style〉  
/* Clear Fix */  
.clearfix:after {  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix {  
display:inline-block;  
}  
/* Hide from IE Mac \*/  
.clearfix {display:block;}  
/* End hide from IE Mac */  
/* end of clearfix */  
〈/style〉
로그인 후 복사

:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto(刚看到的,极力推荐)

只要在父DIV的CSS中加上overflow:auto就搞定。

举例:

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

〈div〉
〈div〉〈/div〉
〈div〉〈/div〉
〈/div〉

作者原话:原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这个问题就完全解决了。

我试了一下,其实不加"_height:1%“在IE下也行,留着吧。

六、需要注意的一些兼容细节

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记" * "号。
2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。

解决办法:加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙,可我们高度明明设好了呀。

解决办法:试试在有空隙的DIV上加上"font-size:0px;"

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;  
width:100px;  
margin:0 0 0 100px;  
}
로그인 후 복사

这种情况之下IE6会产生200px的距离

解决办法:加上display:inline,使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。

解决办法:为了让这一命令在IE上也能用,可以把一个〈div〉 放到 〈body〉 标签下,然后为div指定一个类:
然后CSS这样设计:

#container{  
min-width: 600px;  
width:e?xpression(document.body.clientWidth 〈 600? “600px”: “auto” );  
}
로그인 후 복사

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

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代码

〈DIV id=box〉  
〈DIV id=left〉〈/DIV〉  
〈DIV id=right〉〈/DIV〉  
〈/DIV〉
로그인 후 복사

针对上面这段代码,下面说一下我的理解:

第一、只要right定义了width属性,在FF下绝对就会两行显示
第二、两个width都定义为百分比的话,就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用,不加也在一行,除非你width定义的是数值才用得上。

所以说上面这段代码其实用处不大,至少在FF下不行。其实只要只定义left的width就行了,right不定义width就不管在IE还是FF下都能成功,但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了,真磨叽!


9,截字省略号

.hh { -o-text-overflow:ellipsis;  
text-overflow:ellipsis;  
white-space:  
nowrapoverflow:hidden;  
}
로그인 후 복사

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。 


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

Vue에서 부트 스트랩을 사용하는 방법 Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

부트 스트랩에 분할 라인을 작성하는 방법 부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩 크기를 조정하는 방법 부트 스트랩 크기를 조정하는 방법 Apr 07, 2025 pm 03:18 PM

부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하여 차원 클래스를 사용할 수 있습니다.

부트 스트랩을위한 프레임 워크를 설정하는 방법 부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

부트 스트랩에 사진을 삽입하는 방법 부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 버튼을 사용하는 방법 부트 스트랩 버튼을 사용하는 방법 Apr 07, 2025 pm 03:09 PM

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩 날짜를 보는 방법 부트 스트랩 날짜를 보는 방법 Apr 07, 2025 pm 03:03 PM

답 : 부트 스트랩의 날짜 선택기 구성 요소를 사용하여 페이지에서 날짜를 볼 수 있습니다. 단계 : 부트 스트랩 프레임 워크를 소개하십시오. HTML에서 날짜 선택기 입력 상자를 만듭니다. 부트 스트랩은 선택기에 스타일을 자동으로 추가합니다. JavaScript를 사용하여 선택한 날짜를 얻으십시오.

See all articles