修改本站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%3Atsov.net

相关文章

使用 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

标签：css、样式、bug、position、absolute 评论数：4 发布于：2010-06-13 13:29:54