前言：這篇還在收集題材編寫中，不過先放出來再說了。
設計網頁時，常會有的一個問題，就是往往在你電腦上看起來好好的，但在別人電腦上看，就亂七八糟的。這除了是瀏覽器解讀網頁的規範略有不同外（專利技術不是這篇文的主題所以不提），還跟每個人電腦螢幕的尺寸（正確說是解析度）有關。簡單說，除非你設定的網頁只用到段落而已，不然在不同電腦上所顯示的排版，一定會略有不同。
這一篇文章，就是在討論「要怎樣才能避免排版與想像的差異太大」的問題。除了上面提的不同電腦造成的差異以外，也會順便告訴你，網頁設計要注意的規範。
以下列出本文要討論的幾個項目來：
- 寬度與我設定的不同
- 調整好的位置在不同瀏覽器上看來不同
- 在不同大小的螢幕上看來不同
註：瀏覽器，就是指 IE(Internet Explorer) 或 Fx(Firefox) 、 Op(Opera) 、 Konqueror 、 Safari 這類的。另外我下面說的物件，就是指 HTML 的元素(element)這樣。
寬度與我設定的不同
這個問題的原因，是「你對寬度的解釋」，以及「瀏覽器對寬度的解釋」之間有所不同。
今天有一個物件，你設定寬度(width)為 50px ，它在網頁上就真的只會是 50px 了嗎？下面請來看看這些寬度為 50px 的物件有何不同。
寬度 50px
寬度 50px 、格線 4px
寬度 50px 、內距 10px
看了一下，各位應該會發現到，單單指定寬度，並不能完全決定，該物件在網頁上會佔多少空間，因為「格線」與「內距」也是會佔據空間的。
所以，以後當你指定一個物件寬度為 100% 時，如果它顯示出來卻超出 100% 的話，請檢查一下格線和內距。
調整好的位置在不同瀏覽器上看來不同
這個問題看起來好像只有一個問題，事實上，有好幾個問題都可以歸類到這裡來。（注意，下面我要用純文字編輯器的觀點來解析，從沒看過網頁原始碼的人，請隨意看過就好。）
- 物件設定要向右移動一段距離時……
- 物件要固定在畫面某處時……
物件設定要向右移動一段距離時，在不同瀏覽器上看來卻不同。
這要看你的「物件定位方式」還有「指定物件要移動多少的屬性」用的是什麼。
首先，各位要先知道一件事，「只有區塊層級(block level)的物件，才能在畫面上進行定位移動。」，所以你不能把段落中的某些文字，隨意在畫面上移來移去。
再來，要知道定位相關的屬性（請讀 CSS 教學）有哪些。畢竟這些屬性不代表對錯，瀏覽器只會照屬性跟值來排版而已，而不是照你的意思排版，所以你對屬性的認知有誤，某些嚴格點的瀏覽器，就會跑出預料之外的排版來。
好啦，接下來是實例時間，礙於 blog 不適合給完整的網頁範例，所以需要範例的，請下載這個範例檔案看。
div#test1 { position:relative; left:100px }
div#test2 { position:relative; margin-left:100px }
div#test3 { position:absolute; left:100px }
div#test4 { position:absolute; margin-left:100px }
各位看過範例後，應該會發現，定位方式的 relative 跟 absolute 的物件寬度是不同的，而 left 與 margin-left 排版的方式也是不同的。
註：不指定 width 時是 auto (由瀏覽器自動調整)，不指定 position 時是 relative 。
因此在不指定物件寬度的情況下，用相對定位方式，並且設定要「放在父物件由左邊數來 100px 的位置」的物件，實際上在畫面中，會佔據掉「 100% + 100px 」的寬度。但是在某些瀏覽器上，因為父物件會設定成不顯示超出範圍的子物件(overflow:hidden)，所以不加上格線來看的話，就會誤以為沒問題。
註：父物件跟子物件，就是指 HTML 文件中，一層物件包住一層物件的架構下，在外面包住的那層就叫父物件，包在裡面的就是子物件。
物件要固定在畫面某處時，在不同瀏覽器上看來卻不同。
通常這是因為，瀏覽器對某種定位方式沒支援的關係。最近的例子，就是 IE6 不支援 fixed 的問題，我上面給的範例裡也有，可以看看。（雖然我也不太喜歡一直固定在畫面上的物件啦）
另外一個問題，就是絕對定位，到底要以整個網頁為基準，還是要以父物件為基準，依瀏覽器不同，偶爾也會造成些問題，所以建議各位，多試試看，再決定要不要用複雜的定位方式。
在不同大小的螢幕上看來不同
這沒有完美解法方案的，你一定要取捨，不管是設計成至少要有 800px 寬度的解析度，還是改用很難控制的百分比值來指定寬度等的，這些都要不斷練習才能找出損失最少的專用方案。
另外，單一份 HTML 文件，只要利用 CSS 的話，仍然可以針對不同媒體，呈現不同畫面，有興趣的可以看看我的這份筆記。
結語
雖然我很想寫一系列文章，來說明各種網頁設計上，會碰到的難解問題，不過我的能力跟經驗都不夠，所以寫這主題應該就夠了，其它的主題，請各位自己找找吧。
0 comments:
張貼留言