CSS绝对定位在宽屏分辨率下错位
作者：荆棘鸟 来源：荆棘鸟's Blog 发布时间：2009-07-28 12:24:00
网页兼容测试，除了做不同浏览器的兼容测试，还要观察网页在不同分辨率下的表现情况。
在页面中使用了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页面的返回状态，很不错。
0
投稿猜你喜欢
4款JavaScript放大镜特效脚本。准确的说，Anythingzoomer和Bezoom才是正宗的放大镜特效，当鼠标悬浮在图片上时，能放- ChatGPT 是 OpenAI 开发的 GPT（Generative Pre-trained Transformer）语言模型的变体。它是
- 当列表菜单项目特别多的时候，使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- Dreamweaver出现乱码，大致为两种情况：一是没有标明主页制作所用的文字，这种情况下很简单就可以
- 在国内外大中型数据库管理系统中，把ORACLE作为数据库管理平台的用户比较多。RACLE 不论是数据库管理能力还是安全性都是无可非
- IE 5.5 中的 JScript 版本是 5.5 版，它比以前版本的 JScript 中多了如数组的 push、pop、shift、uns
- 在面向对象的编程中，很多语言都支持函数重载，能根据函数传递的不同个数、类型的参数来做不同的操作，JS对它却不支持，需要我们额外做些小动作。在
- 使用ASP生成图片彩色校验码49行代码,三个文件 Asp文件：Co
- （下面的代码原来我想用折叠的代码的，但是在google里面老是添加不了折叠的代码，所以就整屏的贴出来了，望大家不要见外。） 朋友的比较好的存
- asp之家注：那么为什么要使用分页呢？当记录不多的时候，如10个或20个，我们可以也没必要使用分页来显示数据，但是数据是在不断增加的，当到了
- 当浏览网页时，总有那么一类网站华丽而富有趣味性。在浏览信息的同时，足够让我们眼前一亮。它们在充分融入动画、视频、游戏、甚至是与众不同的交互操
- 发帖或者回帖的时候，系统会提示银两或经验增加的效果，慢慢出现又慢慢消失，用于取代对话框的那种是如何实现的？用google的jquery ap
- Inserted 表中的行是触发器表中新行的副本。 语法 返回所有列 INSERT INTO [tableName] ([columnNam
- 讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面
- 本人就职于一个本地门户网站，每天网站上的天气都得更新。久而久之感到相当麻烦，于是写了一个定时的新闻小偷，帖出来大家参考一下系统
- 颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户
- 如何正确理解MIME类型？mime联系介绍。序号内容类型文件扩展名描述1application/msworddocMicrosoft Wor
- JS操作二进制很麻烦，而且一直没有一个好的无损压缩工具来实现纯文本的压缩。所以钻研了一段时间的gzip，后来发现还是仅用 LZ77 比较容易
- 可能出现的原因有：◆源数据库或目标数据库为 SQL Server 6.5 版。连接到 Access 项目的当前 SQL 服务器和要将数据库转
- 总经一下前段时间用于的jQuery方法：find及children。需要的朋友可以参考下。首先看看英文解释吧： children方法：fin
