相信使用 Blogger 的部落客們應該都有這樣的經驗,就是在「修改版面配置」時,有時候會修改過 html/css 而導致「版面配置」的物件顯示超出範圍、或是對齊上有些異常;雖然只要 html/css 本身調整是正確的,就不會影響實在網頁呈現的效果,但在「版面配置」的畫面就是美中不足。

其實這個問題,我發現是 Blogger 本身的定義所造成的,因為 blogger 將「版面配置」的寬度訂在 760px,所以我們看到它所提供的範本都是寬度都是設為 760px,而一定寬度超出,就會造成「版面配置」顯示會有怪怪的樣子產生。以筆者而言,不喜歡寬度只有 760px 的版面,而不想因為放大寬度而導致在「版面配置」設定畫面中顯示的不完美。所以筆者是採用「比例」的方式來調整 html/css 中的設定。



另外,其於我是採用比例方式來顯示 blog 中的區塊,所以會需要使用「最小寬度」的設定,以便讓 blog 有過好的呈現效果,而不會因為視窗太小而影響內容的顯示;但問題來囉,因為最小寬度 min-width 的設定在 ie 中是無效的,筆者也試過許多變通的方式及網路上找到的方法,但結果通常都是無法讓 ie 有「最小寬度」的效果,不然就是讓另外寫一個很直的 js 來處理,實在是很麻煩而且不夠簡捷。

最後,筆者想到在 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 無效。

請參閱:讓 ie 也有「最小寬度」的效果

ezpost 發表在 痞客邦 PIXNET 留言(0) 人氣()