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页面的返回状态,很不错。
猜你喜欢
- 外观模式(Facade Pattern)是什么外观模式是一种结构型模式,它提供了一个简单的接口,隐藏了系统的复杂性,为客户端提供了一个简单的
- 背景:目前keras框架使用简单,很容易上手,深得广大算法工程师的喜爱,但是当部署到客户端时,可能会出现各种各样的bug,甚至不支持使用ke
- 封装为了jq插件,如下drag.js;(function ($) { $.fn.dragDiv = function (options) {
- 数据描述每条数据项储存在列表中,最后一列储存结果多条数据项形成数据集data=[[d1,d2,d3...dn,result],
- 一、创建虚拟环境Anaconda是一个Python发行版,有了它就可以新建不同的虚拟环境,比如一个环境需要Python3.7,一个环境需要p
- 13个机器学习的框架偏向于Python的原因,供大家参考,具体内容如下前言主要有以下原因:1. Python是解释语言,程序写起来非常方便写
- 一、条件变量与互斥锁条件变量是基于互斥锁的,它必须基于互斥锁才能发挥作用;条件变量并不是用来保护临界区和共享资源的,它是用来协调想要访问共享
- 今天主要记录一下pandas去重复行以及如何分类汇总。以下面的数据帧作为一个例子: import pandas as pddata
- 到底什么是Python?•Python是一种解释性语言。Python代码在运行之前不需要编译。其它解释性语言还包括PHP和Ruby。•Pyt
- 在使用python爬虫技术采集数据信息时,经常会遇到在返回的网页信息中,无法抓取动态加载的可用数据。例如,获取某网页中,商品价格时就会出现此
- 本文实例讲述了php多个文件及图片上传的方法。分享给大家供大家参考。具体实现方法如下:多个文件上传是在单文件上传的基础上利用遍历数组的方式进
- 开篇语本文主要是回顾下从项目创建到生成数据到数据库(代码优先)的全部过程。采用EFCore作为ORM框架。本次示例环境:vs2019、net
- 因为他的简单实用和数量庞大的插件,所以我们喜欢和使用jQuery,在jQuery数量庞大的插件中有很大的一部分是关于图片的,所以今天我们就整
- 通常来说,一个Python程序可以从键盘读取输入,也可以从文件读取输入;而程序的结果可以输出到屏幕上,也可以保存到文件中便于以后使用。本文就
- 原来的题目设想为界面视觉效果的统一性,但是“统一”这个词似乎有点敏感,怕触动萌点无数,而我也无意去设定一个什么什么的统一性来侃侃而谈,极为专
- 下面给大家介绍js中apply和Math.max()函数的问题,具体内容如下所示:var arr=[1,3,6,3,7,9,2];conso
- 目录Python的内置数据类型中的数字1、变量2、数据类型总览3、Python是弱类型的语言4、各数据类型的详细介绍4.1 整数(int)4
- 缘起最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理
- 最近在做项目的时候经常会用到定时任务,由于我的项目是使用Java来开发,用的是SpringBoot框架,因此要实现这个定时任务其实并不难。后
- 一、前言有时候觉得电影真是人类有史以来最伟大的发明,我喜欢看电影,看电影可以让我们增长见闻,学习知识。从某种角度上而言,电影凭借自身独有的魅