修改本站position:absolute下的宽度BUG
在去年制作本站的主题时就考虑了页面加载的顺序,把本站的头部代码放在底部,让主内容放最上面。表面上当然为了搜索引擎,让它收录我的每一篇文章时的简介都是唯一的。这样,并可美名为用户体验的考虑,把最主要的内容最优先加载。
所以我用了CSS中的position:absolute来实现。同时,我的页面是居中、自适应宽度的。所以我设为98%。
而采用position:absolute后,坐标需要一个指定的数值。我只采用了left:1%。
吼,这样子一来,我的页面是这样计算的:
BODY的宽度-左边隙(1%)-内容区(98%)=右边隙
最终就是左边隙=右边隙,那我的页面就是居中的了。
吼,你现在知道了Tsov.net的主题多有趣了吧。
不过,长期以来一直存在一个BUG。在IE7/IE8、Firefox浏览器的计算结果有一个像素的偏差。而在IE6下却没有。
如下图:
这个BUG存在长达一年多,我都没有想出办法来解决。
今天中午看了一样样式。发现有一个问题,以前一直没有注意到,不知当时自已怎写的了:
头部中样式我是这样写的:position:absolute;left:1%;
菜单栏样式我是这样写的:position:absolute;right:1%;
理论上来说,页面结果是一样的。但实际不是。
好了,不讲那么空洞的理论了,我就改为一样。就算是不对齐也是统一不对齐,统一后也就不对齐也看起来也是对齐的了。
懂我说什么了吗?
最后,给大家看看我的GOOGLE收录我每一个页面的简介是不同相的:
http://www.google.com.hk/search?hl=zh-CN&source=hp&q=site%3Asimonsu.cn
- 相关文章
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式用css控制中文字与英文字的间距25个优秀激发灵感的暗色调 CSS Web 设计niftycube造成position:relative失败?回归原始,尽量使用XHTML标签默认属性CSS中的max-width和min-width利用css样式中的expression来攻击css完美设计:灵活设置字体[转载]根据时段自动切换你的站点CSS风格CSS hack浏览器兼容一览表Discuz有趣的BUG(锁IP)CSS Hack汇总快查[转载]表单的CSS设计(css form design)通过CSS控制图片自动缩小[转载]IE中伪类:hover的使用及BUGCSS中expression使用简介本BLOG修改的BUG记录本BLOG修正编辑区的BUG了重新制作了本BLOG的CSS
当前共有4条评论,我也要发表: