좋은 CSS 디자인과 IE6 / IE7 지원은 상호 배타적입니까?

https://stackoverflow.com/questions/766381

12-09-2019
|

문제

모든 웹 개발자와 마찬가지로, 나는 보통 IE6 제작자를 적어도 일주일에 한 번 파울과시기 적절한 죽음으로 저주합니다. 그러나 우리 회사는 가장 많이받는 브라우저를 계속 지원해야합니다.

오늘 내 문제는 CSS에서 먼저 와일드 카드를 사용하고 대신 "상속"속성을 사용하려고 노력하고 있습니다. 그 중 어느 것도 IE7-에 의해 지원되지 않습니다.

나는 정말로, 정말로 잘 구조화되고 잘 구조적이며 적절하게 상환되는 CSS (객체 지향 CSS, 당신이 그 유행어를 좋아한다면), 나는 조만간 내 배 구덩이에 가라 앉는 느낌을 가지고 있습니다. 맞춤형 및 위치 기반 클래스입니다.

이것은 많은 CSS 개념을 처리하는 데 완전히 끔찍한 IE가 얼마나 끔찍한지를 감안할 때, 잘 구조화 된 CSS 문서를 갖는 것과 동시에이 브라우저를 적절하게 지원하는 것이 불가능합니까?

명확히하기 위해 : IE6과 7에서 발견 된 버그와 단점을 둘러 볼 수있는 많은 방법이 있다는 것을 알고 있습니다. , 올바르게 물려받는 잘 작성된 스타일 시트는이를 선택하고 모든 브라우저를 일관된 모양을 선택해야합니까? ". 그것이 말이되기를 바랍니다.

다시 말해, 내 원칙을 고수하고 좋은 스타일 시트를 코딩해야합니까? 아니면 HTML과 CSS의 Frankenstein 수술을 최소화하면서도 여전히 존경받는 결과를 얻을 수있는 행복한 매체가 있습니까?

해결책

공정하게 말하면, 당신은 IE에서 모든 것을 비난 할 수는 없습니다 (Microsoft는 확실히 최악의 범죄자입니다). 크고 빠르게 진화하는 표준의 문제의 일부는 적시에 완벽하게 구현하기에는 너무 많은 움직이는 목표물이라는 것입니다. 불행히도, 웹 브라우저의 릴리스주기는 새로운 웹 사양의 릴리스와 일치하지 않습니다. 따라서 모든 브라우저 개발자가 할 수있는 모든 브라우저 개발자는 최신 W3C 권장 사항에서 가능한 많은 기능을 구현하여 무엇을 선택하는 것입니다. 그들은 생각한다 먼저 구현하는 데 가장 일반적으로 사용되는 기능이됩니다.

그러나 상황이 명확하게 향상되고 있습니다 ~이다 IE6/7을 지원할 수 있으며 여전히 적절한 CSS 설계를 사용할 수 있습니다. 그것은 단지 ... 어렵다. 보세요 이 레이아웃 엔진 및 CSS 지원 비교. 전체 트렌드를 살펴보면 대부분의 브라우저 (IE)가 장기적으로 확립 된 표준을 준수하는 경향이 있음을 알 수 있습니다. 도입 후 표준을 구현하는 데 다른 브라우저가 더 오래 걸립니다.

그리고 때로는 하나의 브라우저가 다른 브라우저보다 "적은"표준을 준수하지는 않습니다. 새로운 표준으로 문제는 종종 다른 개발 팀이 채택하기로 선택한 것입니다. 다른 부분들 새로운 사양의. 따라서 대부분의 브라우저에서 CSS3가 이미 구현되기 시작했지만 모든 주요 렌더링 엔진에서 일관된 지원을보기 전에 CSS4가 게시 될 때까지 기다려야 할 것입니다. 그리고 지금 최신 CSS3 기능을 사용하려고하면 모든 주요 브라우저에서 호환성을 설정하는 데 어려움을 겪을 수 있습니다. 그러나 CSS1에 도입 된 기능을 사용하는 경우 전혀 문제가되지 않습니다.

따라서 Ugly CSS 해킹을 사용하는 것과 같은 유일한 옵션은 잘 정립 된 것입니다. 나이가 많습니다 명세서. 그렇다면 문제는 더 이상 아닙니다 특정 브라우저를 지원하는 동안 웹 표준을 준수하려고. 대신 문제는 단순히됩니다 최신 및 가장 큰 CSS 기능을 사용하려는 충동에 저항하려고.

그 외에도이 반복 상황에 대해 내가 보는 유일한 영구 솔루션은 W3C에서 우선 순위를 정하십시오 새로 도입 된 사양의 여러 부분이 모든 주요 브라우저에서 동기화 된 개별 단계에서 구현 될 수 있도록 새로 도입되었습니다. 예를 들어, 문법 규칙은 시행 마감일과 함께 최우선 과제가 될 수 있습니다. 그 후에는 요소 및 속성 선택기가 될 수있는 두 번째 단계가 올 것입니다.

이를 위해서는 W3C와 개발 팀간에 엄청난 수준의 협력이 필요하지만 그만한 가치가 있습니다. 결국, 사용자와 웹 개발자는 IE가 CSS3에서 한 가지 하위 집합을 구현하는 것이 좋지 않으며 Firefox는 다른 서브 세트와 WebKit 브라우저를 구현합니다. "표준"은 실제로가 될 때까지 좋지 않습니다. 표준화 모든 주요 렌더링 플랫폼에서. 각 브라우저가 더 적은 새로운 기능을 지원하는 것이 좋습니다. 동일한 기능, 그들이 보편적으로 지원되지 않는 많은 자신의 기능을 별도로 소개하는 것보다.

다른 팁

전혀 - 당신은 IE의 단점을 보상 할 수 있습니다. 조건부 의견 그리고 IE 특정 스타일 시트, 다른 브라우저에 '멋진'스타일 시트를 제공합니다.

내가 찾은 다른 것은 CSS 재설정. 이것이 IE의 모든 문제를 해결하는 것은 아니지만, 좋은 기준을 제공합니다.

가장 anoying ie6 특징 박스 모델 처리입니까? 상자를 배치 할 때 대신 여백을 고수하고 상대 글꼴 크기를 사용하여 글꼴 크기 조정을 허용합니다. 기발한 나머지는입니다 잘 기록 된.

사용 조건부 의견 잘 작동하는 브라우저를위한 깨끗한 스타일 시트를 모두 갖추고 있으며 IE에서 여전히 아름답게 사용하는 가장 깨끗한 방법입니다. 이것이 내가 사용하는 것입니다. 내 사이트의 모양과 느낌을 수리하기 위해 몇 줄의 CSS 파일 만 필요합니다.

그만큼 어두운 크로스 브라우저의 경로는 일관된 외관과 느낌입니다 CSS 해킹, 그러나 나는 그것이 사용을 강력하게 낙담시킬 수 없다.

일반적으로 FF와 Chrome/Safari에서 스타일을 작동시키는 경우, 즉, 정확한 수정 사항은 거의 없습니다.

훌륭한 사이트가 있습니다 위치는 모든 것입니다 이는 FF, IE 및 Safari가 표준 CSS와 어떻게 일치하는지 자세히 설명합니다. 이 사이트에서는 CSS에 대해 많은 조건부 코드를 작성해야 할 필요성을 완화시킬 IE의 대부분의 해결 방법 / 치료법을 찾을 수 있습니다.

당신은 또한 체크 아웃하고 싶을 것입니다 목록 CSS 및 IE에 대한 자세한 내용. CSS가있는 Tableless 레이아웃에 대한 훌륭한 기사가 있습니다. IE 등의 높이 버그를 처리합니다.

확실히. "표준"모드와 반대로 페이지를 "표준"모드로 렌더링하는지 확인하면 일반적인 IE CSS 문제가 많이 해결됩니다. 이렇게하려면 페이지 상단에 유효한 문형 문을 제공해야합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

다른 사람들이 지적했듯이, 또 다른 좋은 아이디어는 모든 패딩과 마진을 제거하는 스 니펫으로 스타일 시트를 시작하는 것입니다.

*,html {
margin: 0;
padding: 0;
}

마지막으로, IE의 CSS 기반 레이아웃의 일반적인 문제 중 하나는 예상 할 때 플로트를 청소하는 것이 발생하지 않는다는 것입니다. 이것은 "Haslayout"이라는 IE의 숨겨진 객체 속성과 관련이 있습니다. "레이아웃이있는"객체 만 올바르게 감싸고 떠 다니는 어린이 물체를 둘러싸게됩니다. 컨테이너가 단순히 하나 이상의 차원을 지정하여 컨테이너가 "레이아웃을 갖도록 쉽게"보장 할 수 있습니다.

height: 1%;
width: 100%;
zoom: 1;

나는 한 가지를 제외하고는 조건부 IE 스타일 시트를 개인적으로 사용하지 않습니다. PNG 배경을 IE <7의 GIF로 대체하려면, 그것들을 사용하는 데 아무런 문제가 없다. 두 곳의 다른 곳에서 물체. 위의 세 가지 팁과 약간의 인내심을 사용하면 Mozilla/Webkit에서와 마찬가지로 IE 6/7에서도 렌더링하는 단일 스타일 시트를 사용하여 CSS 기반 레이아웃을 만들 수 있어야합니다.

행복한 코딩!

IE 6은 실제로 우리가 할 수있는 일을 제한합니다.

고급 셀렉터 (및 상속 - 즉, 7도 지원하지 않음)에 대한 지원이 부족한 것입니다. 자식 선택기와 속성 선택기가 있으면 좋을 것입니다. 이는 우리가 쓰고 유지 관리 해야하는 코드의 양을 실제로 줄일 수 있습니다. 당신은 당신의 스타일을 복제하여 그들에 대한 지원 부족을 둘러 볼 수 있으므로, 당신은 그들이 존재하지 않는 것처럼 코드를 코딩해야합니다.

한숨을 쉬다.

IE6 및 Chrome (또는 WebKit)으로 올바르게 렌더링되는 온라인 CSS 자습서 만 따르십시오. 두 가지 모두에서 제대로 보이면 모든 브라우저가 (거의) 제대로 보일 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow