집 > 기사 > 웹 프론트엔드 > 다양한 브라우저와 호환되는 웹페이지를 만드는 자바스크립트에 대한 자세한 설명

다양한 브라우저와 호환되는 웹페이지를 만드는 자바스크립트에 대한 자세한 설명

小云云원래의: 2018-01-29 17:24:071619검색

이 글은 주로 다양한 브라우저와 호환되는 JavaScript 개발 웹 페이지에 대한 관련 정보를 소개합니다. 이러한 기능을 익히는 데 도움이 되는 몇 가지 방법이 도움이 될 수 있습니다.

머리말:

CSS가 다양한 브라우저와 호환된다는 것은 일반적인 문제입니다. 다음 내용은 너무 새로운 것이 아니며 순전히 개인적인 요약이므로 도움이 되기를 바랍니다.

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) 세로 중심을 동일하게 설정합니다. height를 현재 p로 전달한 다음 Vertical-align: middle.(콘텐츠를 감싸지 않도록 주의하세요. )
2) 가로 중심. margin: 0 auto (물론 보편적이지는 않습니다)

3. a 태그의 콘텐츠에 스타일을 추가해야 하고, display: block;을 설정해야 합니다(탐색 태그에서 공통)

4 FF와 IE의 BOX에 대한 이해 차이로 인해 2px 차이가 발생하고 다음과 같은 문제가 발생합니다. p는 IE에서 여백을 두 배로 설정하므로 FF에서는 기본적으로 ul 태그에 패딩이 있습니다. 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. 콘텐츠 목록)

6. p에 대해 고정 높이를 설정하지 마세요. 높이 적응성을 얻으려면 오버플로를 추가하는 것이 가장 좋습니다.

7. 손 커서 관련: 포인터. 그리고 손은 IE에만 적용됩니다.

P.S IE5 및 기타 브라우저는 고려할 필요가 없습니다.

다양한 브라우저와 호환되는 웹페이지를 만드는 자바스크립트에 대한 자세한 설명

관련 기사