CSS绝对定位,兼容分辨率
- 发表于
- 前端
网页兼容测试,除了做不同浏览器的兼容测试,还要观察网页在不同分辨率下的表现情况。
在页面中使用了CSS绝对定位,发现在宽屏下错位。随后测试非1024*768分辨率,都有很严重的错位情况。
最后找出了原因,CSS绝对定位是相对于紧邻最近的上级元素的位置,一开始我理解为浏览器左上角,这样在不同分辨率下就会出问题,用position:relative; 声明一下参考的固定位置就OK了。
如下面这段其中Top,Left都是指相对div.contentArea的位置。
页面Html
1 2 3 4 |
<div> <div id="navmenu"></div> <div id="linkad"></div> </div> |
相关CSS定义
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.contentArea { position:relative; /*声明一个固定的位,必须*/ width:910px; overflow:hidden; } #linkad { <strong>position:absolute; </strong> /* 绝对定位 */<strong> </strong> z-index:9999; top:31px; left:0; width:908px; height:20px; background:#ECE9E1; } |
说一下,分辨率兼容测试方法,由于我现在用的是标准4:3屏幕,一开始走了弯路,想找一款宽屏模拟软件。其实不用那么麻烦,只要调整显示器属性的分辨率,就是进行分辨率兼容测试了。
如果一定要用软件,可以用Firefox的Web Developer插件,这个插件可以模仿不同分辨率下的显示效果,向下兼容,也就是说只能模仿比显示低的分辨率,显示器是1024*768,只能向下显示800*600的网页状态。
原文连接:CSS绝对定位,兼容分辨率
所有媒体,可在保留署名、
原文连接
的情况下转载,若非则不得使用我方内容。