즉, CSS3를 지원하는 방법

즉, CSS3를 지원하는 방법: 1. "ie-css3.htc"를 다운로드하여 서버 디렉터리에 넣어 사용합니다. 2. "css3 PIE.htc" 파일을 다운로드한 다음 "PIE.htc"를 업로드합니다. 파일을 웹사이트 디렉토리 중간에 저장하세요.

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

방법 1: ie-css3.htc 사용

ie-css3.htc는 IE 브라우저가 box-shadow뿐만 아니라 일부 CSS3 속성을 지원할 수 있도록 하는 htc 파일입니다. 또한 IE 브라우저가 둥근 모서리를 지원할 수도 있습니다. border-radius 속성과 텍스트 그림자 속성 text-shadow.

사용 방법: 다운로드하여 서버 디렉토리에 넣습니다.

에 다음 코드를 작성합니다.

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

방법 2: css3 파이 플러그인 사용

css3 파이는 IE 브라우저가 일부 CSS3 속성을 지원할 수 있게 해주는 플러그인입니다.

공식 웹사이트: http://css3pie.com/

[추천 학습: css 비디오 튜토리얼]

사용 방법:

1단계: css3 PIE.htc 파일 다운로드

2단계: PIE 변환 .htc 파일을 웹사이트 디렉토리에 업로드하세요. 이 디렉토리를 기억한다면 어떤 디렉토리에도 업로드할 수 있습니다.

3단계: 아래와 같이 html 파일을 만들고, css3 코드 조각을 작성하고, PIE.htc를 도입합니다.

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

참고: .htc 파일 경로는 CSS가 아닌 html 파일의 경로에 상대적입니다. 파일.

몇 가지 알려진 문제:

이 방법은 만병 통치약이 아니며 몇 가지 제한 사항과 주의해야 할 사항이 있습니다.

1. z-index 관련 문제

IE에서 이러한 CSS3 효과는 VML의 도움으로 구현됩니다. VML은 둥근 모서리 또는 투영 효과를 사용하여 컨테이너 요소를 그린 다음 컨테이너 요소를 후면 형제 노드로 삽입합니다. 대상 요소의 경우 요소가 position:absolute 또는 position:relative인 경우 css3-container 요소는 DOM 트리에서 동일한 z-index 값으로 설정됩니다. 동일한 수준의 요소는 항상 이전 요소를 포함합니다. 이를 덮으면 다른 요소가 삽입되는 것을 방지할 수 있습니다.

여기서 문제가 발생합니다. 현재 요소의 위치 속성이 기본 속성인 정적이면 z-index 속성은 쓸모가 없으며 재정의되지 않습니다. 따라서 IE 브라우저에서 CSS3을 렌더링하지 않습니다. 이번에는 작업에 성공했습니다. 해결책도 매우 간단합니다. 대상 요소 position:relative를 설정하거나 조상 요소 position:relative를 설정하고 z-index 값(-1일 수 없음)을 할당합니다.

2. 등가 경로의 문제

IE 브라우저의 동작 속성은 HTML 문서와 관련이 있으며 다른 CSS 속성과 관련이 없습니다. 이로 인해 Pie.htc 파일을 사용하는 것이 불편해집니다. 절대 경로가 루트 디렉터리에 있으면 CSS 파일 이동이 불편하고, 상대 경로가 HTML 문서에 있으면 다른 HTML 페이지에서 Pie.htc 파일의 재사용성이 크게 줄어듭니다. 동시에 border-image 뒤의 URL 속성 경로도 처리하기 어렵습니다.

3. 약어의 문제

IE에서 CSS3 렌더링을 구현하려면 PIE를 사용하세요. (다른 방법도 마찬가지입니다.) border-top-left-radius와 같은 약어 형식만 사용할 수 있습니다. 왼쪽 위 둥근 모서리를 나타내기 위해 . 그러나 PIE는 이러한 작성 방법을 지원하지 않으며 정직한 약어일 수 있습니다.

4. 올바른 콘텐츠 유형을 제공하세요

IE 브라우저가 htc 파일을 지원하도록 하려면 "text/x-comComponent"라는 단어가 포함된 콘텐츠 유형 헤더가 필요합니다. 그렇지 않으면 동작이 무시됩니다. 대부분의 웹 서버는 올바른 콘텐츠 유형을 제공하지만 일부에는 문제가 있습니다.

PIE 메서드가 컴퓨터에서 유효하지 않은 경우, 즉 여기에서 htc 파일이 Pie.htc 파일을 참조하는 것이 유효하지 않은 경우 서버 구성을 확인하세요. 최신 콘텐츠 유형으로 업데이트해야 할 수도 있습니다. 예를 들어 Apache의 경우 .htaccess 파일에서 다음을 수행할 수 있습니다.

AddType text/x-component .htc

그러나 어떤 이유로 인해 서버 구성(예: 공용 호스트 또는 우주 서비스 공급자가 제공하는 서버)을 수정할 수 없습니다. PHP 파일을 사용하여 htc 파일을 간접적으로 호출할 수 있습니다. 이 PHP 파일의 코드를 보여주면 다음과 같이 그 의미를 알 수 있습니다.

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

PHP 파일을 통해 "text/x-comComponent"라는 단어가 포함된 콘텐츠 유형 헤더를 추가하고 파이를 호출합니다. .htc 파일을 동시에 .

위에 표시된 php 파일과 관련하여 여기를 클릭하세요: Pie.php (마우스 오른쪽 버튼 클릭 - [대상 | 다른 이름으로 링크 저장]), 또는 직접 새 php 파일을 만들고 위의 두 줄의 코드를 복사할 수 있습니다. 또는 이 글에서 제공하는 원본 패키징 리소스의 Wrappers 폴더에 이 PHP 파일이 있는데 이름이 대문자로 되어 있습니다.

위 PHP 파일을 사용하는 경우에는 Pie.php와 Pie.htc를 같은 폴더에 넣어야 하며 CSS에서의 동작은 다음과 같이 작성되어야 합니다.

behavior: url(pie.php);

위 내용은 즉, CSS3를 지원하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!