behappier 的網誌是 Xuite 的推薦日誌，在 Xuite 首頁輪播的推薦列表可以看到它。
http://blog.xuite.net/behappier/happistory
但是大改版後發生了個問題。
在螢幕解析度 1024*768 下，瀏覽完全正常。就像這樣：
圖一
在螢幕解析度 800*600 下卻是這樣：右欄被中間欄蓋住。這對螢幕解析度 800*600 的使用者來說很不方便。
圖二 - 本圖為影像處理軟體合成後的示意圖
怎麼辦？
behappier 的網誌使用自定樣式(CSS)。大略內容是這樣的：
/*定位框*/
#container {
position: relative;
text-align: left;
behavior:expression( this.style.width = (document.documentElement.offsetWidth<970)?"800px":"100%");
min-width: 420px;
padding: 0;
margin: 0 auto;
background-image: url none;
background-repeat: no-repeat;
} /*左欄*/
#linksLeft {
float: left;
width: 230px;
margin: 15px;
padding: 0;
} /*右欄*/
#linksRight {
float: right;
width: 235px;
margin: 15px;
padding: 0;
} /*中間欄*/
#mid {
position: relative;
margin: 0 205px 0 280px;
padding: 0;
} |
上述設定簡單的解釋是：左欄跟右欄都用 float 指令，分別使其置左及置右 (float: left 跟 float: right)。左中右三個欄位分別設定這樣的寬度：
圖三
由於 IE 對 CSS 指令的支援性不夠完善，使用 float 的物件常無法按照我們的期待正常顯示。圖二的右欄被遮蓋，原因在此。只能期待未來 IE 7.X 版能改善，I hope... 
更多關於 IE 對 CSS 支援不足的討論
Internet Explorer and the Expanding Box Problem http://www.positioniseverything.net/explorer/expandingboxbug.html
回歸主題。Xuite 工作小組在面對大改版浩劫後努力許多天 (也被罵了很多天...真辛苦他們)，終於發佈一個更新說明，在 Xuite 版主的 新版CSS 12/02 更新 一文中，廢除 float 指令。
原本這個更新是要解決插圖過大造成文字下沉的問題，但也同時解決 float 帶來的困擾，更解決 behappier 的困擾。
參考 Xuite 版主發佈的更新之外，我還將定位框設定簡化了。修改後，behappier 的自定樣式(CSS)如下：
/*定位框*/
#container {
position: relative;
text-align: left;
behavior: expression( this.style.width = (document.documentElement.offsetWidth<970)?"800px":"100%");
min-width: 420px;
padding: 0;
margin: 0 auto;
background-image: url none;
background-repeat: no-repeat;
/*以下是修改後的定位框語法*/
text-align: left;
position: relative;
} /*左欄*/
#linksLeft {
float: left;
width: 230px;
margin: 15px;
padding: 0;
/*以下是修改後的左欄語法*/
position: absolute;
left: 0px;
width: 230px;
margin: 15px;
} /*右欄*/
#linksRight {
float: right;
width: 235px;
margin: 15px;
padding: 0;
/*以下是修改後的右欄語法*/
position: absolute;
right: 0px;
width: 235px;
margin: 15px;
} /*中間欄*/
#mid {
position:relative;
margin: 0px 205px 0px 280px;
padding: 0px 0px 0px 0px;
/*以下是修改後的中間欄語法*/
position: relative;
margin: 0 265px 0 260px;
padding: 0 10px;
} |
成功了，現在用解析度 800*600 或 1024*768，中間欄都不會蓋住右欄！
本文內容蒙 behappier 同意發表。特此致謝！
Xuite CSS教學、樣式與問題整理
http://blog.xuite.net/yeegiah/diary/11431003
更多關於羅傑的CSS：
http://blog.xuite.net/yeegiah/diary?st=c&re=list&p=1&w=110964
標籤 ： 
