网页设计中内容居中错位现象
最近在给客户做一个企业站点。做完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; } 利用这个代码可以给所有的页面强制增加滚动条。也许有的朋友说没必要这么做。又不影响内容和结构,这么点小问题而已。不过个人对这个有点看不爽 呵呵 所以还是改掉。页面的内容在做设计稿的时候已经设定好,现在增加固然问题不大,但是强加的内容,会破坏内容的整体协调性和关键词的密度。最后决定用代码强制页面都有滚动条。 相信不少朋友也碰到过这样的问题,选择哪一种方法,就根据自己的需要了。也许你有更好的解决办法。欢迎给我留言,大家探讨一下。
还没有任何评论,你来说两句吧