HTML5 및 CSS3 프로그래밍에 대한 브라우저 비 호환성 관리 방법 - 더미

요즘의 모든 브라우저는 CSS3를 꽤 잘 관리하지만 Internet Explorer (특히 이전 버전)는 비표준 방식으로 일을하는 것으로 잘 알려져 있습니다. 다음은 비 호환성을 다루는 데 도움이되는 몇 가지 트릭입니다.

Internet Explorer 관련 코드 작성 방법

간단한 예제를보고 조건부 주석 트릭을 사용하여 CSS 비 호환성 문제를 해결하는 방법을 보면 조건부 주석이 작동하는 방식을 조금 더 쉽게 볼 수 있습니다.

다음은 Firefox의 간단한 페이지입니다.

여기 IE 7에 표시됩니다.

IEorNot의 코드를 살펴보십시오. html과 그것이 어떻게 작동하는지보십시오. 아닙니다. html

이제 조건부 주석을 사용하여 브라우저를 결정하겠습니다. IE를 사용하고 있다면 알려 드리겠습니다.
 -
IE


새로운 부분은 이상한 주석입니다:

IE

조건부 주석은 Internet Explorer에서만 사용할 수있는 특수 기능입니다. 이것들을 사용하면 브라우저에 테스트를 적용 할 수 있습니다. 원하는 HTML 코드를 

CSS에서 조건부 주석을 사용하는 방법
조건부 의견은 그다지 흥미롭지는 않지만 호환되는 CSS를 만드는 데 매우 유용한 도구가 될 수 있습니다. 조건부 주석을 사용하여 IE 용으로 작동하는 스타일 시트와 다른 모든 것과 함께 작동하는 스타일 시트를 만들 수 있습니다.

대부분의 브라우저는 노란색 배경을 만드는 표준 스타일 시트를 읽습니다.
IE에서 페이지를 렌더링하면 두 번째 스타일 시트가 사용됩니다.

코드를 보면 IEorNot과 매우 유사하다는 것을 알 수 있습니다. HTML 페이지.

WhatBrowser. html 
이 페이지는 IE에 빨간색 배경이 있고 다른 브라우저에는 노란색 배경이 있습니다.
페이지에서 IE 및 다른 브라우저에서 다른 스타일을 사용하려면 다음을 수행하십시오.
먼저 기본 스타일을 정의하십시오.

대부분의 브라우저에서 사용할 스타일을 만들어보십시오. 대부분의 경우이 스타일은 IE에서도 작동합니다. 스타일을 페이지 수준에서 (쌍으로) 만들거나 외부에서 (태그로) 만들 수 있습니다.


헤더에 조건부 주석을 만듭니다.
기본 스타일 다음에


조건부 주석을 만듭니다 (이 코드 스 니펫에 나와 있음).

body {background-color: red; 색상: 노란색;} 


주석 처리 된 스타일은 페이지 단위 또는 외부 형식 일 수 있습니다.
기본 스타일과 같이이 쌍을 사용하여 페이지 수준 스타일을 만들거나 태그를 사용하여 외부 정의 된 스타일 시트를 가져올 수 있습니다.
IE 문제를 해결하는 코드 만 조건부 스타일에 배치하십시오.



IE는 두 스타일 모두에서 코드를 읽으므로 모든 것을 반복 할 필요가 없습니다. IE가 예상 한대로 작동하지 않는 영역에만 조건부 스타일을 사용하십시오.
조건문을 끝내는 것을 잊지 마십시오.


조건부 설명이 끝나면 대부분의 페이지가 나타나지 않습니다. 그것은 나쁠 수 있습니다.
Internet Explorer 버전 확인


사용중인 IE 버전을 지정할 수 있습니다. IE 버전 7 이상은 표준 준수 코드에서 작동하기 때문에 배치 가능한 CSS에서는 중요합니다. 이전 버전에서는 그렇지 않습니다. 이 변형을 사용하여 IE 6 이하 버전의 코드 만 지정할 수 있습니다.
… <[endif] →



CSS 재설정 사용 방법
브라우저가 어떤 CSS 요소를 포함할지에 동의하더라도 실제 세부 사항이 다를 수 있습니다. 예를 들어, 목록 요소에 다른 여백과 패딩을 선택할 수 있습니다. 웹 개발자는 종종
css reset


라는 특별한 CSS 스타일을 사용합니다.
이것은 모든 단일 요소의 세부 사항을 명시 적으로 결정하는 외부 CSS 파일입니다. CSS 리셋을 사용하면 브라우저 간의 차이에 놀라지 않을 것입니다. 많은 훌륭한 리셋은 cssreset에서 무료로 사용할 수 있습니다. com.






 페이지 리셋은 설계자에게있어 중요한 일이지만 페이지로드 및 렌더링 시간이 약간 느려집니다. 유일한 CSS로 페이지 재설정을 사용하지 말고 특정 요구에 맞게 수정해야합니다. 또한 모든 브라우저에서 모든 것이 똑같이 작동 할 것을 염려 할 때까지는 재설정이 중요하지 않음을 알 수 있습니다.