1. DOCTYPE을 사용
- hasLayout문제 즉 박스값의 너비 문제를 그나마 쉽게 해결 가능(?) 하다.
- DOCTYPE이 없을 경우 브라우져별로 렌더링 하는 기준이 달라지는 것을 해결 할 수 있다.
- 렌더링 기준을 같게 하면 핵의 사용을 줄일 수 있다.

2. position:relative : 비선형화적인 박스들의 정렬이나 컨텐츠등의 내용들이 보이지 않는 문제들을 해결해 준다.

3. float된 엘레멘트들에 왼쪽margin값을 사용할 경우 display:inline을 사용하라
- 왼쪽으로 float속성과 margin값을 주면 double-margin bug가 발생하게 된다. 이에 대한 해결
방법은 display:inline;속성으로 해결 할 수 있다.
- float을 많이 사용할 경우 예상하지 못하는 버그들이 많이 생길 수 있다. 이것을 해결하는 방법은
컨텐츠가 유동적이지 않고 고정일 경우 position:absolute를 사용하면 될 것이다.
즉 float을 너무 많이 사용하지 말자

4. 엘레멘트들은 hasLyaout으로 설정되어 있다.
- ie6(and ie7's)렌더링 이슈는 엘레멘트의 hasLayout속성을 설정하여 고칠 수 있다. hasLayout은 다른 컨텐츠들 간의 위치나 간격을 설정하여 준다.
만약 당신이 inline엘레멘트를 block 또는 투명효과를 적용해야한다면 hasLayout을 설정해야 한다.
hasLayout을 설정하는 가장 쉬운 방법은 CSS Height나 width를 설정하는 것이다.
(zoom을 사용할 수도 있다. 하지만 css 표준방식은 아니다)
실직적인 너비(높이)를 설정하는것이 요구되지만 가능하지 않다. 당신이 할 수 있는것은 height:1%속성을
주는것이다.
만약 부모 엘레멘트에 높이 값이 없다면 엘레멘트의 물리적인 높이는 영향을 받지 않지만 hasLayout은
활성화 된다.

5. 문자 버그
다양한 레이아웃은 마지막 몇 글자들(float된 엘레멘트는 clear된 엘레멘트의 아래)이 나타나는 버그를 유발 할 수 있다.
이에 대한 해결 방법은
1. 모든 float된 엘레멘트들을 display:inline;속성을 준다.
2. 마지막으로 float된 엘레멘트에 margin-right:-3px속성을 사용한다.
3. float된 엘레멘트의 마지막 아이템에 conditional comment를 사용한다.
예)
4. 감싸고 있는 컨테이너의 마지막 엘레멘트를 비어있는 div태그를 사용한다.
(너비값을 90%혹은 유사하게 설정하는것이 필수적이다.)

6. a태그의 클릭 또는 hovered 엘레멘트를 사용한다.
-ie6은 css hover효과만을 지원한다. 이에 대한 해결책은 javascript로 가능하다.

7. !important속성이나 ie에 적합한 셀렉터들을 사용한다.
예를들어 minimum heights는 다음과 같이 정의할 수 있다.
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}

ie6 은 min-height를 적용시킬 수 없고, height속성의 auto와 20em 속성은 불명확하게 덮어씌게 된다.
그러나 contents가 더 많은 내용을 요구하게 되면 너비,높이는 증가하게 된다.

ie에 접학한 셀렉터의 사용 방법은 다음과 같다.
#element {
min-height: 20em;
height: 20em;
}

/* ignored by IE6 */ ie6에는 적용되지 않는다.
#element[id] {
height: auto;
}

전에 싸이뉴스 작업할때 공통 css에 !important속성을 쓰고 작업을 했었다.
그 결과 어떤 속성을 쓰던지 해당 속성은 !important를 써야하는 문제가 생겼다.
!important는 필요한곳에만 쓰도록 하자.


8.%로 주는 높이, 너비 값을 피한다.
- %를 사용하면 ie는 혼란스러워한다. 당신이 주의깊게 모든 엘레멘트에 %size를 준다고 해도
가장 좋은 방법은 피하는것이다. 당신은 %값을 !important속성과 함께 다른 브라우져에서도 사용할 수 있다

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}


9.테스트는 자주 쉽게 해야한다.
당신의 웹사이트 혹은 어플리케이션이 완료될때까지 ie6테스트를 멈추지 말아야한다. 그렇지 않을 경우
그 문제는 더욱 악화되거나 고치는 시간이 더 오래 걸린다. ie6과 파이어폭스로 작업을 한다면
다른브라우져도 대부분 잘 적용될 것이다.



10.당신의 코드를 refactoring해라.
- 종종 레이아웃 문제는 바로 고치는 것 보다 다시 생각하는것이 더 빠를수 있다. 두번째 대안은
html과 css를 단순하게 만드는것이 더욱 더 효과적이다.
이것은 나쁜코드를 완벽하게 막는 방법이다. 그러나 이것 또한 몇가지 이슈가 발생될 수 있고
앞으로는 이것을 해결하는 방법을 알 수 있을 것이다.