2010-12-14 5 views
2

많은 CSS 속성이있는 웹 페이지를 디자인했습니다. IE에서 웹 페이지를 볼 때 다른 브라우저와 비교할 때 적합하지 않습니다.어떤 CSS 속성이 Internet Explorer에서 문제를 일으킬 수 있습니까?

다음 번에 IE에서주의해야 할 CSS 속성은 무엇입니까?

감사합니다.

+6

* 전체 * 심각하게. – Kyle

+0

여백 및 패딩과 같은 일부 속성을 의미합니다. – KillerFish

+0

사용중인 IE 버전에 따라 IE는 상자 모델을 읽고 IE가 일을 약간 다르게 처리하는 방식을 읽습니다. – 4imble

답변

1

동일한 측에 떠 여유가있는 div이있는 경우, 그것은 IE의 더블 마진가 발생합니다

div 
{ 
    margin-left: 10px; 
    float: left; 
} 

또는

div 
{ 
    margin-right: 10px; 
    float: right; 
} 

여백이 사실에 20 픽셀됩니다 IE.

해결 방법은 display:inline입니다.

+0

display : 인라인은 픽스를 약간 어색하게합니다. 가능한 경우 패딩을 사용하거나 IE6 특정 규칙에서 여백을 반으로 줄 것을 권합니다. – annakata

1
+0

그리고 http://haslayout.net/css/index - 다른 북마크 폴더에있었습니다 :) – annakata

+0

Funnily만큼 그들은 논리적 박스 모델을 가지고 있습니다. – Keyo

+0

@Keyo - 그게 주관적이지만 당신은 그렇게 생각하는 사람이 아닙니다. 나는 IE 팀에 이것을 신용하지 않을 것이다 - IE의 나머지 부분은 그것이 행복한 (?) 사고라고 제안한다. :) – annakata

0

다음 내용을 사용하지 않아도 즉석에서 재생할 수 없습니다.

display:inline-block 
+0

그것은 실제로 나를 위해 작동합니다. 도처에 있지만 실제로 인라인 블록을 얻지 않고도 이상한 행동을 고치는 것은 알려진 트릭입니다.IE의 방법은 어둡습니다 ... –

+0

예, 확대/축소를 사용하면 : 1 도움이되지만 사용하기에는 거리가 멀습니다. – Blowsie

1

가장 먼저 말할 것은 HTML 코드에 항상 <!DOCTYPE> 선언이 있어야한다는 것입니다. 이렇게하면 IE가 다른 브라우저와 훨씬 더 일관성있게 만드는 "표준 모드"로 전환됩니다. (아직 누락되거나 깨진 기능이 많지만, Doctype을 사용하지 않으면 재앙에 비해 아무것도 없습니다.)

누락 및 손상된 기능을 확인하려면 http://www.quirksmode.org/css/contents.html을 살펴 보시기 바랍니다.

Quirksmode 사이트에는 어떤 CSS 속성과 다른 기능이 어떤 브라우저에서 작동 하는지를 보여주는 탁월한 표 세트가 있습니다. 또한 특정 상황에서 버그가 무엇인지 정확하게 설명합니다. 내가 이와 같은 질문을 한 적이 있다면, Quirksmode가 내가 대답을 찾는 첫 번째 장소이다.

내가 대답을 찾으러가는 두 번째 장소는 http://caniuse.com/입니다. 그러나이 사이트는 최신 기능에 더 초점을 맞추기 때문에 알아 두어야 할 모든 것을 알려주지는 않습니다.

관련 문제