|
[CSS/IE6] 跨瀏覽器：畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法
1. 情境說明
我們經常將網頁固定為某個寬度，例如：
#container{
width: 928px;
}
但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大，而可能難以閱讀。
例如以美寶莊園的地圖為例，在正常視窗大小時內容可完整呈現：
但寬度縮為 360px 時，內容變得不好理解而難以操作：
2. 改善方法：加入 max-width 及 _width (IE6) 的設定
在相關的 block 中設定 CSS，將寬度改為可動態調整：
#container{
max-midth: 928px; /* CSS 標準語法 */
_width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/
margin: auto; /*此為「水平置中」的語法，若有需要可加上*/
}
調整後結果：
可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。
3. 改善頂圖 LOGO 的呈現：設定 background-position (CSS)
頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左，而例子中的美寶莊園 LOGO 是位於頂圖的「右側」，所以無法呈現。
我們只要將頂圖的設定改為「置右」即可：
#header{
background-image: url(imgs/wiki_top.jpg);
background-position: right top;
}
#header{ /* 簡寫 */
background: url(imgs/wiki_top.jpg) right top;
}
修改後可見頂圖 LOGO 已成功呈現：
以上為美寶莊園地圖（與百科）為了「動態調適視窗大小」而作的一系列的改善步驟，希望對讀到這篇文章的人有所幫助！
參考資料：
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. Placing a CSS background image horizontally right on an h2 using a span element (2009)
我們經常將網頁固定為某個寬度，例如：
#container{
width: 928px;
}
但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大，而可能難以閱讀。
例如以美寶莊園的地圖為例，在正常視窗大小時內容可完整呈現：
但寬度縮為 360px 時，內容變得不好理解而難以操作：
2. 改善方法：加入 max-width 及 _width (IE6) 的設定
在相關的 block 中設定 CSS，將寬度改為可動態調整：
調整後結果：
可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。
3. 改善頂圖 LOGO 的呈現：設定 background-position (CSS)
頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左，而例子中的美寶莊園 LOGO 是位於頂圖的「右側」，所以無法呈現。
我們只要將頂圖的設定改為「置右」即可：
修改後可見頂圖 LOGO 已成功呈現：
以上為美寶莊園地圖（與百科）為了「動態調適視窗大小」而作的一系列的改善步驟，希望對讀到這篇文章的人有所幫助！
參考資料：
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. Placing a CSS background image horizontally right on an h2 using a span element (2009)
Edited 2 time(s). Last edit at 09/06/2011 01:51AM by HP.
(編輯記錄)