網頁

2007年12月18日 星期二

讓 ie 也有「最小寬度」的效果

min-width 是個非常方便的 css 命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但瀏覽器市佔率最高的 ie 卻不認得這個標準指令,而它實際上把 width 當做最小寬度來使。而在網路上看到其他網友,為了讓這一命令在 ie 上也能用,大多都是用一個 <div> 放到 <body> 的方式來處理,如下:
<body>
<div class="container“>
...
</body>

然後在 CSS 部份加入:
#container {
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
可參考「最大寬度與最小寬度網頁設定

而筆者想到在 xuite css 中,有一行指令可以讓 xuite blog 在 ie 中也有最小寬度的限制效果,所以我就將那行敘述用到了 blogger html/css 之中,結果真的可以達到我要的效果,而且只要在 html/css 中加入一行敘述就可以了,真的是很簡捷有效。

以下為我在 blogger html/css 中「最小寬度」的設定方式:
body {
...
min-width: 760px;
behavior: expression(this.style.width=(document.documentElement.offsetWidth<760)?"760px":"100%");
}
其中 min-width 在 ie6 中無效,而 behavior 為 ie 專屬,對 fx 無效。

沒有留言:

張貼留言