首页 » 建站 » 网站设计 » 正文

网页设计中内容居中错位现象

发表于: 汉林设计信息网-翰林院营销顾问 · 2011-2-26 ·  1,694 views  ·  4 replies 

最近在给客户做一个企业站点。做完HTML之后检查下代码。通过css验证。 在准备嵌套程序之前,最后看一遍页面是否有问题。这时候发现屏幕存在左右错位的现象。具体表现在由一个页面切换到另一个页面的时候,内容居中的部分会偏移一些。截图到PS里看了一下。居中宽度都是960px,没问题。但是有些页面的居中内容部分却向左偏移了8px。 cover iphone 8 仔细检查了代码。 goed iphone hoesje 没有错误。完全一样的代码页。出现的结果却不一样。 cover iphone 6 6s plus 经过比对,发现差异在内容区域。当内容超过一屏的时候。会产生8px的偏移。百思不得其解!早上问了个朋友,结果朋友一眼就看出来问题所在,超过一屏的,多了个滚动条!在经过检测,确定问题就是由滚动条引起。 我的电脑显示器分辨率是1280*1024.没有超过一屏的时候,没有滚动条,内容居中,两边分别留边160px ;当内容超过一屏,右侧增加了滚动条之后。两边分别留边152px;正好是偏左了8PX。而由于浏览器和操作系统的不同。这个值会根据滚动条的宽度来变化。 iphone xr hoesje 参考下表:

屏幕分辨率(宽度) IE6(滚动条宽度,下同) IE7 Firefox2
标准 最大化 标准 最大化 标准 最大化
800px 28px 12px 20px 16px 24px 16px
1024px 20px 12px 20px 16px 16px 16px
1280px 20px 12px 20px 16px 16px 16px
1440px 20px 12px 20px 16px 16px 16px

既然找到了问题,就想办法来解决吧。因为在有滚动条和无滚动条的时候,表现不一样。虽然宽度错位不影响使用,但是看起来有点抖动总是不爽。想了两个解决方法,第一个是通过增加内容 将页面的内容设定都超出一屏,这样所有的页面都有滚动条,也就没有差异了。 cover iphone 6 6s 还有一个办法就是用代码限制。html { overflow-y: scroll; } 利用这个代码可以给所有的页面强制增加滚动条。也许有的朋友说没必要这么做。又不影响内容和结构,这么点小问题而已。不过个人对这个有点看不爽 呵呵 所以还是改掉。页面的内容在做设计稿的时候已经设定好,现在增加固然问题不大,但是强加的内容,会破坏内容的整体协调性和关键词的密度。最后决定用代码强制页面都有滚动条。 相信不少朋友也碰到过这样的问题,选择哪一种方法,就根据自己的需要了。也许你有更好的解决办法。欢迎给我留言,大家探讨一下。

本文链接: http://www.hanlinweb.com/webdesign-content-center-error.html
0 like+
«上一篇: :下一篇»

相关文章

WEB设计中的形状研究

WEB设计中的形状研究

一般来说,在网页设计中没有说哪个元素或原理要比另一个更...

网页设计的相对主义论

网页设计的相对主义论

相对主义的概念是指一个观点不会是绝对的真理或正确。对于...

管窥网页设计中的色彩理论

管窥网页设计中的色彩理论

无可争议地,任何设计中最重要的一个方面就是色彩。设计者...

网站设计页面形式的分析

网站设计页面形式的分析

没有一个好的网站设计基础,就不会取得理想的网站排名效果...

客户说网站要做大气一点

客户说网站要做大气一点

在百度UEO看到篇文章,觉得还满有点意思,分享给大家看看。...

Windows平台上的强大的文本编辑器

Windows平台上的强大的文本编辑器

这里介绍两款灰常强大的软件,就是那些能让你们保持高效率...

4 thoughts on “网页设计中内容居中错位现象”

  1. 还没有任何评论,你来说两句吧

Leave a reply