집 > 기사 > 웹 프론트엔드 > 다양한 브라우저와 호환되는 자바스크립트로 개발된 웹페이지의 상세 예시

다양한 브라우저와 호환되는 자바스크립트로 개발된 웹페이지의 상세 예시

小云云원래의: 2017-12-27 10:02:02991검색

CSS가 다양한 브라우저와 호환된다는 것은 흔한 문제입니다. 이 기사에서는 주로 다양한 브라우저와 호환되는 JavaScript로 개발된 웹 페이지에 대한 관련 정보를 소개합니다. 요약) 이러한 기능을 모두가 숙지할 수 있도록 도와주세요. 필요한 친구들이 참고하면 도움이 될 것입니다.

1. CSS HACK

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

1, !important

IE7의 !important 지원으로 인해 !important 방법은 이제 IE6 HACK에만 적용됩니다. .선언된 위치는 미리 선언해야 한다는 점 기억하세요.)

<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>

2, IE6/IE77 for FireFox

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

<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>

참고:

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

2. 범용 플로트 클로저(매우 중요!)

클리어 플로트의 원리는 다음을 참조하세요. [구조적 마크업 없이 플로트를 지우는 방법]

글로벌 CSS에 다음 코드를 추가하고 닫아야 하는 p에 class="clearfix"를 추가하세요.

<style>


.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}

.clearfix {display:block;}


</style>

3 . 기타 호환성 팁(다시 말함)

1, FF 패딩을 p로 설정하면 너비와 높이가 증가하지만 IE는 그렇지 않습니다. (!important로 해결 가능)

2, 센터링 문제

1 ). line-height를 현재 p 높이와 동일하게 설정한 다음, Vertical-align: middle을 전달합니다. (콘텐츠를 감싸지 않도록 주의하세요.)
2) 수평으로 가운데 맞춤( 물론 전능하지는 않습니다)

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

4, BOX에 대한 이해의 차이 FF와 IE 사이에는 2px 차이가 발생하고 IE에서 부동으로 설정된 p의 여백을 두 배로 늘리는 등의 문제도 있습니다.

5, FF 아래의 레이블은 기본적으로 목록 스타일과 패딩을 갖는 것이 가장 좋습니다. 불필요한 문제를 피하기 위해 미리 선언합니다. (탐색 레이블 및 콘텐츠 목록에서 공통)

6. 외부 래퍼로 p에 고정 높이를 설정하지 마세요. 또한 높은 적응성을 얻으려면 Overflow:Hidden을 추가하세요.
7, 손 모양 커서 관련: 포인터 및 손 모양은 IE에만 적용됩니다.

P.S IE5 및 기타 브라우저에서는 두 가지를 모두 고려할 필요가 없습니다.

궁금한 점이 있으시면 메시지를 남기시거나 이 사이트의 커뮤니티에 가서 소통하고 토론해 주세요. 읽어주셔서 감사합니다. 이 사이트에 대한 여러분의 지원에 감사드립니다.

다양한 브라우저와 호환되는 자바스크립트로 개발된 웹페이지의 상세 예시

관련 기사