CSS絕對位置在寬屏解析度下錯位

網頁相容測試，除了做不同瀏覽器安全色的測試，還要觀察網頁在不同解析度下的表現情況。

在頁面中使用了CSS絕對位置，發現在寬屏下錯位。隨後測試非1024*768解析度，都有很嚴重的錯位情況。

最後找出了原因，CSS絕對位置是相對於緊鄰最近的上階項目

的位置，一開始我理解為瀏覽器左上方，這樣在不同解析度下就會出問題，用position:relative;
 聲明一下參考的固定位置就OK了。

如下面這段其中Top，Left都是指相對div.contentArea的位置。

 

頁面Html

<div class="contentArea"><br /> <div id="navmenu"></div><br /> <div id="linkad"></div><br /></div>

相關CSS定義

.contentArea {<br /> position:relative; /*聲明一個固定的位，必須*/<br /> width:910px;<br /> overflow:hidden;<br />}<br />#linkad {<br /> position:absolute; /* 絕對位置 */<br /> z-index:9999;<br /> top:31px;<br /> left:0;<br /> width:908px;<br /> height:20px;<br /> background:#ECE9E1;<br />}

 

說一下，解析度相容測試方法，由於我現在用的是標準4:3螢幕，一開始走了彎路，想找一款寬屏類比軟體。其實不用那麼麻煩，只要調整顯示器屬性的解析度，就是進行解析度相容測試了。

如果一定要用軟體，可以用Firefox的Web Developer外掛程式，這個外掛程式可以模仿不同解析度下的顯示效果，向下相容，也就是說只能模仿比顯示低的解析度，顯示器是1024*768，只能向下顯示800*600的網頁狀態。

不管如何，Firefox的確是調試網頁好幫手，上次我就用它查看404頁面的返回狀態，很不錯。