반응형
IE6 does not understand min/max of both height or width. So, if you need any of these four css properties to work in IE6, then you'll need to feed IE6 an IE expression. Basically, they're little snippits of javascript tailored for IE.
IE expressions don't validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the <head>, or feed them to IE6 with the * html hack - whatever floats your boat. Here are all three methods to feed specific rules to IE6.
min-width in IE6
div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth<501?"500px":"auto");
}
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth<501?"500px":"auto");
}
max-width in IE6
div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth>499?"500px":"auto");
}
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth>499?"500px":"auto");
}
min-height in IE6
div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight<501?"500px":"auto");
}
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight<501?"500px":"auto");
}
max-height in IE6
div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight>499?"500px":"auto");
}
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight>499?"500px":"auto");
}
Note: In the examples above, you can safely remove the first width value of 500px, or you can change it to any value to suit your needs. In other words, it does not have to be the same value as the expression directly below it - it's just an added feature. For instance, let's say you were doing a min/max width on your #wrapper, with the values of {min-width: 600px; and max-width: 1024px;}. Well then, I might make my fall-back width value {width: 960px;} for example. This way, if JS if turned off and someone is viewing on IE6 and on a 2000px wide screen, my layout (and text) does not stretch the full length of the screen. That’s only one example, I'm sure there are many other situations where the fall-back value would fit as well.
...and min-width in IE6 on the body
body {
width:expression(d=document.compatMode=="CSS1Compat"?documentElement:document)&&(d.clientWidth<501?"500px":"auto");
}
width:expression(d=document.compatMode=="CSS1Compat"?documentElement:document)&&(d.clientWidth<501?"500px":"auto");
}
반응형
'Programing > CSS' 카테고리의 다른 글
| Tailwind CSS로 시작하는 유틸리티 퍼스트 스타일링 (Tailwind Getting Started) (1) | 2025.06.10 |
|---|---|
| px, em, rem? 헷갈리는 CSS 단위 정리 (CSS Units Guide) (0) | 2025.06.10 |
| iPhone & Android input radius css init (0) | 2013.06.19 |
| css 문자열자르기. (0) | 2011.12.21 |
| 프린트 전용 CSS "@media print" (0) | 2010.12.30 |
| 가운데 정렬 (1) | 2009.11.05 |
| 웹표준이라기보단 스타일 (0) | 2009.09.26 |