다양한 브라우저와 호환되는 JavaScript로 개발된 웹페이지에 대한 자세한 소개
- 黄舟원래의
- 2017-10-03 06:00:321293검색
이 글에서는 주로 다양한 브라우저와 호환되는 javascript로 개발된 웹페이지에 대한 관련 정보를 소개합니다. 이러한 기능을 익히는 데 도움이 되는 몇 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
javascript로 개발된 웹페이지는 다양한 브라우저와 호환됩니다.
머리말:
CSS가 다양한 브라우저와 호환된다는 것은 일반적인 문제입니다. 다음 내용은 너무 새로운 것이 아니며 순전히 개인적인 요약입니다. 초보자를 위한 도움말입니다.
1. CSS HACK
다음 두 가지 방법으로 오늘날 거의 모든 HACK을 해결할 수 있습니다.
1, !important
IE7의 !important 지원으로 !important 방법은 이제 IE6에서만 사용할 수 있습니다. HACKs .(글쓰기에 주의하세요. 선언 위치를 미리 명시해야 한다는 점을 기억하세요.)
<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. 범용 부동 클로저(매우 중요!)
clear float의 원리는 [구조적 마크업 없이 float를 지우는 방법]을 참고하세요
Global 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에서는 그렇지 않습니다. !중요)
2, 센터링 문제.
1) -height는 현재 p와 동일한 높이로 설정되고 수직 정렬: 중간(줄바꿈되지 않도록 주의)
2) 가로 중심. margin: 0 auto; (물론 전능하지는 않습니다.)
3, 필요한 경우 a 태그의 콘텐츠에 스타일을 추가하려면 display: block; (내비게이션 태그 공통)
4. FF와 IE의 BOX에 대한 이해 차이로 인해 2px의 차이가 발생하고, IE 등에서는 float로 설정된 p의 여백이 2배가 됩니다. 문제
5, ul 태그는 FF에서 기본적으로 목록 스타일과 패딩을 갖고 있습니다. 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. (탐색 태그 및 콘텐츠 목록에서 일반적임)
6, 외부 래퍼 p로 수정하지 마세요. 높이를 조정하려면 오버플로: 숨김을 추가하는 것이 좋습니다.
7, 커서: 포인터 및 손은 IE5 및 기타 브라우저에만 적용됩니다. 둘 다 처리하세요. 이것에 시간을 들일 가치가 없습니다.
위 내용은 다양한 브라우저와 호환되는 JavaScript로 개발된 웹페이지에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!