我的机器中只装了IE,FireFox,Opera,所以我只测试了这几个浏览器。因为IE处理滚动条的方式跟另外两个浏览器的处理方式不太一样,所以分开说。
1024分辨率下:
IE:
IE7:1003*590
IE6:1003*596
IE5.5:1003*607
Maxthon(正常模式):1003*544
浏览窗口的高度跟IE上边的工具栏有关系,以上的高度都是在IE的默认状态下的。Mathon有IE模式、正常模式、简单模式三个模式,我只测试了正常模式下的。
FireFox:
FireFox的浏览窗口的高度和宽度是这样计算的:当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1024*575,当页面的高度超过575时,竖向滚动条出现,浏览窗口的宽度变成1007。
Opera:
Opera 的情况跟FireFox的情况一样,当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1018*625。当出现竖向的滚动条时,页面的宽度变成1001。但是此时如果页面的宽度超过1001时,并不会出现横向的滚动条,只是超出1001范围的内容会被盖在竖向滚动条下面,页面宽度超过1018时浏览窗口才会出现横向滚动条。
800分辨率下:
IE:
IE7:779*422
IE6:779*428
IE5:779*439
Maxthon(正常模式):779*376
FireFox:
800*407(无滚动条状态)
783*408(有滚动条状态)
Opera:
794*457(无滚动条状态)
777*458(有滚动条状态)
结论:1024分辨率下,页面宽度应为1002,页面重要内容的位置不能低于570;800分辨率下,页面宽度应为778,页面中重要内容的位置不能低于400。
1024分辨率下:
IE:
IE7:1003*590
IE6:1003*596
IE5.5:1003*607
Maxthon(正常模式):1003*544
浏览窗口的高度跟IE上边的工具栏有关系,以上的高度都是在IE的默认状态下的。Mathon有IE模式、正常模式、简单模式三个模式,我只测试了正常模式下的。
FireFox:
FireFox的浏览窗口的高度和宽度是这样计算的:当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1024*575,当页面的高度超过575时,竖向滚动条出现,浏览窗口的宽度变成1007。
Opera:
Opera 的情况跟FireFox的情况一样,当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1018*625。当出现竖向的滚动条时,页面的宽度变成1001。但是此时如果页面的宽度超过1001时,并不会出现横向的滚动条,只是超出1001范围的内容会被盖在竖向滚动条下面,页面宽度超过1018时浏览窗口才会出现横向滚动条。
800分辨率下:
IE:
IE7:779*422
IE6:779*428
IE5:779*439
Maxthon(正常模式):779*376
FireFox:
800*407(无滚动条状态)
783*408(有滚动条状态)
Opera:
794*457(无滚动条状态)
777*458(有滚动条状态)
结论:1024分辨率下,页面宽度应为1002,页面重要内容的位置不能低于570;800分辨率下,页面宽度应为778,页面中重要内容的位置不能低于400。
发表评论
-
ie6下CSS存在的BUG
2011-06-10 15:44 804A 双倍MARGIN設置float的位 ... -
你需要知道的CSS3 动画技术
2010-11-18 09:19 987原文链接:http://www.qianduan.net/wh ... -
中文字体的英文名称对照表
2010-09-07 10:25 1905原文链接:http://xuui.net/ui-design/ ... -
10个糟糕的IE Bug及其修复
2010-05-15 19:28 719国外有很多优秀的文章可以用来学习,我决定花些时间翻译。我并不知 ... -
关于a伪类的顺序
2010-05-15 18:49 1635昨天董老师说她设置的a伪类在点过链接以后当鼠标再经过的时候就不 ... -
CSS3圆角属性在Firefox,Chrome,Safari的实现
2010-05-14 15:51 870先说一下Firefox的圆角属性: -moz-bord ... -
用CSS实现网页图片的预加载
2010-04-05 02:22 90为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网 ... -
CSS中关于clearfix对float的使用
2010-04-05 02:21 982/* ClearFix */ .clearfix:after ... -
您需要了解的DIVCSS网页布局的8条面试题目
2010-04-05 02:20 936CSSer与其他IT职位一样,在找工作的时候,都会面临着面 ... -
网页设计中谨慎使用CSS sprites
2010-04-05 02:19 646CSS sprites 是网站速度的 ... -
常用CSS缩写语法总结
2010-04-05 02:14 760使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。cs ... -
FireFox浏览器和IE浏览器下CSS兼容问题
2010-04-05 02:13 6151.DOCTYPE 影响 CSS 处理 ... -
IE对CSS的渲染引擎hasLayout
2010-04-05 02:09 789haslayout 是Windows Internet E ... -
CSS Hack
2010-04-05 02:07 11801. <!--[if !IE]><!- ... -
div+css样式表的id和class常用命名规则
2010-04-05 02:05 1763用div+css样式表 写页面有一段时间了,起初写d ... -
浅谈IE与Firefox对CSS的不同解析
2010-04-05 02:01 894其实,以前从来没有接触过CSS相关的内容,都是在做业务的编程, ... -
CSS滤镜
2010-04-05 01:39 7311. Alpha:设置透明度 Alpha(Opacity ...
相关推荐
但是,如果表格内容超过了这个宽度,浏览器会默认扩展表格以适应内容,这可能违背了我们设定固定宽度的初衷。为了解决这个问题,我们可以设定单元格(`<td>`和`<th>`)的宽度,并限制它们的溢出行为。 对于单元格的...
通栏自适应浏览器宽度的Banner幻灯片是网页设计中常用的一种元素,它能够根据用户浏览器窗口的大小自动调整自身的宽度,确保在不同设备和屏幕尺寸下都能展示良好的视觉效果。这种设计通常用于网站的首页或者重要页面...
但宽度的设定更为关键,因为它直接影响网页内容的排列和阅读体验。在不同浏览器下,宽度计算方式略有不同: 1. IE6.0会将显示器分辨率减去21像素,例如1024的分辨率会变为1003像素。同时,无论网页内容多高,IE6.0...
"自适应浏览器宽度的带缩略图焦点图"是一个专为现代网页设计打造的组件,它能够根据用户设备的浏览器宽度自动调整大小,提供优秀的用户体验,尤其是在移动设备上。这个组件的特点在于它不仅有全屏的显示效果,还包含...
在React开发中,我们经常需要根据浏览器窗口的大小来调整组件的布局或行为,以实现响应式设计。`React Resized` 是一个这样的库,它允许我们监听元素或浏览器窗口的尺寸变化,并在尺寸发生变化时提供回调函数,返回...
本文将深入探讨“通栏自适应浏览器宽度的Banner幻灯片”这一主题,结合描述和标签,我们将重点讲解如何创建一个能够根据屏幕宽度自动调整的Banner特效。 首先,"自适应"(Responsive)是现代网页设计的关键特性,它...
宽度自适应是指网页元素的宽度会根据浏览器窗口的大小自动调整。这通常通过CSS的`width`属性配合百分比单位来实现。例如,设置`div`的宽度为`width: 100%;`,这样`div`就会占据其父元素的全部宽度,当窗口大小改变时...
在另一个代码片段中,`.R`类的div元素宽度设定为100px,背景色为蓝色,且浮动到右边。这里展示了另一种自适应布局的方式,通过浮动元素和固定宽度来分配页面空间。 最后的代码示例中,`.wrap_l`, `.wrap_m`, 和 `....
截图后,原始图片可能是全尺寸的,需要根据用户设定的宽度和高度进行缩放。这通常使用图像处理库如ImageMagick、PIL(Pillow)或者OpenCV来完成。 4. **格式转换**: 提供的描述中提到生成的是BMP格式的缩略图,BMP...
在网页设计中,"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术,它主要涉及CSS(层叠样式表)的运用,使网页内容能够根据不同的屏幕尺寸和设备进行适配,尤其是针对响应式设计。在这个布局模式下,通常...
在网页设计中,有时我们需要创建一个div元素,其宽度能够根据浏览器窗口的大小实时变化,以确保内容始终占据整个浏览器宽度。jQuery 提供了一个简单易用的方法来实现这个功能,让我们详细了解一下如何通过jQuery动态...
网站制作过程中,浏览器兼容性是开发者常常面临的一大挑战。不同浏览器对HTML、CSS和JavaScript的解析方式可能存在差异,导致在不同浏览器中展示效果不一致。以下是一些针对常见浏览器兼容性问题的解决策略: 1. **...
网页制作入门教程PPT学习教案是一个关于网页制作的基础知识教程,主要介绍了网页框架、框架页面的设定、框架边框的颜色、框架边框的宽度、框架页面之间的链接、框架的基本语法、框架的尺寸设置、 COLS & ROWS 的使用...
在HTML中,表格的宽度可以通过设置`width`属性来调整,但这种方法并不灵活,因为浏览器可能会忽略这些设定。在CSS中,我们可以使用更精细的方式来控制表格及其单元格的宽度。 1. **CSS样式控制** - `table-width`:...
在网页设计领域,CSS3(层叠样式表第三版)引入了媒体查询(@media queries)这一强大特性,使得我们能够根据设备的特定条件,如视口宽度、屏幕分辨率等,来应用不同的样式规则。这极大地提升了网页的响应式设计能力...
当设置width为auto时,浏览器会根据内容自动确定宽度。但要注意,如果其他样式如浮动(float)或绝对定位(position: absolute)被应用,auto可能不会按预期工作。 4. 最大和最小宽度: 可以使用max-width和min-...
3. **百分比宽度**:如果知道内容的最大宽度,可以设置一个最大宽度(如`max-width`),然后将宽度设为百分比,这样当内容超过最大宽度时,div会自适应内容宽度,但不超过设定的最大值。 总结来说,CSS实现div宽度...
- 背景图像和背景颜色是指CSS属性中的background-image和background-color,它们可以为网页元素设定背景图像或者颜色,使得网页的视觉效果更加丰富和吸引人。 - Email链接是一种特殊的超链接,它通过mailto协议指向...
网页自适应设计是一种重要的网页开发技术,它使得网站在各种不同的设备、屏幕尺寸和浏览器上都能呈现出良好的用户体验。随着移动设备的普及,用户可能通过桌面电脑、笔记本、平板电脑或智能手机访问网页,因此,网页...