CSSでのmin-width＆min-height。
使えると結構便利だったりしますが、IEでは対応していない等で普段はあまり敬遠しがち。
IE7からは対応しているので問題ないのですが、IE6で実現するにはJavaScriptを使ったり何かと面倒だったり。
そこでハック的な構成でIE6でmin-width＆min-heightを実現する方法。
下記の記述方法で可能なもよう。
【IE6対応 min-width】
div {
min-width:100px;
width: auto !important;
width: 100px;
}
【IE6対応 min-height】
div {
min-height:100px;
height: auto !important;
height: 100px;
}
min-heightについては、IE6ではheight要素で設定した値が、中の要素がその値以上になれば自動で広がるので必要なかったりするのですが、widthについてはその様にはいかず、この記述が活用できるのではないかと思います。
それとmin-width＆min-heightには関係ないですが、CSSで背景画像を使って画像にロールオーバーを付けた際に、初めのマウスオン時に画像がチラつくのも下記ハックで回避できるようです。
【IE6対応 ロールオーバー時の画像チラつき回避】
html {
filter: expression(document.execCommand(“BackgroundImageCache”, false, true));
}
無駄なJavaScript設定も必要なくなりそうです。