CSS绝对定位在宽屏分辨率下错位

网页兼容测试,除了做不同浏览器的兼容测试,还要观察网页在不同分辨率下的表现情况。

在页面中使用了CSS绝对定位,发现在宽屏下错位。随后测试非1024*768分辨率,都有很严重的错位情况。

最后找出了原因,CSS绝对定位是相对于紧邻最近的上级元素的位置,一开始我理解为浏览器左上角,这样在不同分辨率下就会出问题,用position:relative; 声明一下参考的固定位置就OK了。

如下面这段其中Top,Left都是指相对div.contentArea的位置。

页面Html

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

相关CSS定义

.contentArea {
        position:relative;         /*声明一个固定的位,必须*/
        width:910px; 
        overflow:hidden;
}

#linkad { 
        position:absolute;         /* 绝对定位 */
        z-index:9999;
        top:31px;
        left:0;
        width:908px; 
        height:20px;
        background:#ECE9E1;
}

说一下,分辨率兼容测试方法,由于我现在用的是标准4:3屏幕,一开始走了弯路,想找一款宽屏模拟软件。其实不用那么麻烦,只要调整显示器属性的分辨率,就是进行分辨率兼容测试了。

如果一定要用软件,可以用Firefox的Web Developer插件,这个插件可以模仿不同分辨率下的显示效果,向下兼容,也就是说只能模仿比显示低的分辨率,显示器是1024*768,只能向下显示800*600的网页状态。

不管如何,Firefox的确是调试网页好帮手,上次我就用它查看404页面的返回状态,很不错。

  • quote 3. 百叶
  • http://www.kk51.com
  • CSS中position这个属性是浏览器差异最大的啦,一般很少用到这个.
    "用position:relative; 声明一下参考的固定位置"
    改天试下,如果真按你这样说的,那这个使用方法是非常好的,可以做些很绚的效果.

    我以前一直以为relative这个是相对位置的意思.就是相对外部容器盒子
    absolute是绝对定位,其实也是相对定位,相对浏览器定位(body盒子)

    不过由于没有用过,没多少实际经验.
  • 2009-8-7 15:05:42 回复该留言
  • quote 6. manwu88
  • http://www.manwu123.com
  • ╮(╯▽╰)╭我的严重错位( ⊙ o ⊙ )啊!及待解决www.manwu123.com 宽屏下,图片跑大左边,其他的到都在中间,郁闷,好好学习一下
  • 2011-3-31 19:54:14 回复该留言

评论恒久远,一贴永流传

提交

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

帮助他人 - 快乐自己

最近发表

Search

热门文章

随机推荐

卓越新书

Top

Powered By Z-Blog 1.8 Walle Build 100427

© 2007-2011 zfnn.com. 皖ICP备07503469号