참조원문 http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

참조문서 http://trend21c.tistory.com/299

 

******************************************************************************

 

1. 베스트 CSS 디자인 2007

HTML과 CSS를 분리하여 사용한 사례에서도 얼마나 다양하고 멋진 디자인이 나오는지 알수 있다.
꼭 CSS 디자인이라는 점을 부각하지 않더라도 디자이너에게 충분히 디자인적 감성을 자극할만한 디자인들이다. 외국의 잘된 웹사이트디자인을 보자면 우리나라에서는 한글 폰트의 부재가 얼마나 안타까운지 다시한번 느끼게 된다.



2. CSS 파일 크기를 줄이는 10가지 팁

CSS 파일 크기를 줄이는 10가지 팁을 소개하고 있다.

10. 줄바꿈을 줄이기
9. 사소한 주석 피하기
8. 3글자로 표현할수 있는 컬러는 3글자로 쓰기
7. 속성값이 0 일때 px 단위 제거하기
6. margin과 padding 한줄로 작성하기
5. background 정의 한줄로 하기
4. font 정의 한줄로 하기
3. border 정의 한줄로 하기
2. 불필요한(사용하지 않는) CSS 제거하기
1. PHP를 사용하여 CSS 파일 압축전송하기



3. CSS 프레임웍소개

CSS 프레임웍이라고 하지만 javascript 프레임웍처럼 그다지 유용해보이지는 않다.
좀더 그리드(레이아웃)을 편하게 도와준다거나 이런저런 유용한 클래스를 모아놓은 건데
사실 코드의 가독성이나 종합적인 관리측면(유지보수포함)에서 아직은 필요성을 느끼지 못하겠다.


4. 윈도우의 MSIE 7 버그 95가지

세상에 이렇게 멋있게 IE7 버그를 나열해 주시다니 감개무량할 따름
이 뿐만 아니라

IE6 버그 95가지
모질라버그 1가지
오페라버그 9가지
사파리버그 3가지

등 아주 유용하게 버그리스트를 모아주셨다.

 

******************************************************************************

 

1. The Box Model

 

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

 

해당 태그 적용시 ie에서는 100px, 표준을 지키는 브라우저(ie8등) 124px 이 된다.

 

2. The Double Margin Bug

 

div#box {
   float: right;
   margin-right: 20px;
}

 

ie6에서는 margin이 40px이 먹힌다.

 

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.

 

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

 

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

 

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!