阿德日志 » 侧边栏 http://blog.delai.me 我的自留地 Thu, 29 Dec 2011 03:33:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WordPress侧边栏错位的原因及解决方法 http://blog.delai.me/2008/07/wordpress-sidebar-error.html http://blog.delai.me/2008/07/wordpress-sidebar-error.html#comments Sat, 05 Jul 2008 02:34:17 +0000 阿德 http://www.soulward.cn/?p=224 刚使用的主题WordPress主题常常有侧边栏错位，被放到留言框下面 或者 在原来侧栏位置的下面留言框右下脚的位置。

现象一：侧边栏位于留言框位置的右下角，既侧边栏原来位置的下面且左边没有内容的地方。

原因：不同的浏览器对.css ＋ HTML 的渲染算法稍有区别，这导致了常常firefox里面正常的，在IE7里面有点点不一样，在IE6里面浏览器认为，右边的空间不够用了，只好将侧边栏放到位于侧边栏原来位置的下面且左边没有内容的地方，于是就侧边栏错位了。

解决方法：修改主题包里的style.css文件。关键是修改里面的page和content两个div容器对应的宽度大小width属性值。要么让前者变大点，要么让后者变小点，这样对于发生错位的浏览器来说，侧边栏有足够的空间可以放了。操作很简单，你根本不需要任何.css的知识，搜索#page 找到后，看它的width属性的数值，比如970。那么你将整个style.css文件里面所有数值是970的都改大一点点，比如980，反正直到浏览器正常显示为止。当然也可以修改content那个数值，方法类似。

现象二：侧边栏位于留言框下面。

原因：如果，只是个别网页有这种情况。那么不是主题包的问题了，是你博客文章的HTML代码里面包含一些类似<div><!–DC  这样的代码，按照HTML的规则，类似C语言，一个<div>是要于</div>对应的，他们里面还可以再包含<div><div>，这里平白无故多出来个<div>，导致浏览器在解析时候把这个div开始到侧栏甚至底部都作为这个div容器的一部分了，自然，在渲染时候，他就把侧栏也当作左边正文content的一部分了，于是就给弄到留言框下面了。

我上次用某个博客备份软件，将网易博客备份成.xml然后导入到wordpress博客里面，结果导致很多文章里面有类似<div><!–DC这样的代码，导致了上面说的这种情况，起初在在源码里面找原因，着实花了我好长时间。平常正常的编辑一般不会导致这种情况，可以用<!—->对HTML进行注释的，而且一些插件也是这种调用方式的。

解决方法：原因里已经提到了～～，当然也不排除主题包的问题，但如果是主题包的问题一般是所有网页都这个样子的，如果是的话，那看看主题包的代码吧～。

Comments

  • 2008-07-5, buyaobo.cn|不要博 writes: 一点小建议,你的侧边放关于天气的插件没什么实际意义,还不如把连接做在侧边,增加你的外连,多SEO还是有一定好处的
  • 2008-07-5, 阿德.idea writes: 你说得对，我正在修改sidebar :cool:
  • 2008-07-16, 关于wordpress主题错位及侧边栏下掉的原因及解决办法 writes: [...] （以下内容参考自阿德日志） [...]
  • 2008-09-8, WordPress侧边栏错位的解决办法 writes: [...] 今天用Wordpress发表了转载的一篇文章之后，查看首页时即看到Wordpress侧边栏（sidebar）部分全部错位。整个侧边栏下沉到了博客首页文章的下面。我尝试着更换模板，重新上传模板文件，禁用所有的插件等方法都没有解决问题。在网上搜索了很多类似问题的解决办法，其中包括望月的博客的解决方法、阿德日志中提到的方法，但这些都没有解决我的这个问题。 [...]
  • 2008-09-12, 我就不行我搞不定你 | 杂货铺在线 writes: [...] WordPress侧边栏错位的原因及解决方法 (4) [...]
  • 2008-11-10, HUHU writes: 我都只是首页这样，请教，什么问题呢
  • 2008-11-10, 阿德Delai writes: 能具体点么？ 出现这种错位只有两种可能： 1. CSS 中宽度设置问题 2. 网页内容中有一些特殊符号，这些HTML符号会和原本的
    这样的符号对应起来，导致
    容器不正常地结束掉
  • 2008-11-11, HUHU writes: :cool: 谢谢，我已经换了主题，解决了，治标不治本的方法。哈哈
  • 2008-12-5, 关于wordpress侧边栏下沉，虚惊一场 | My Life My Sky--赵剑的博客 writes: [...] 在网上搜索了一下，查看了望月博客和阿德日志，把上面介绍的方法都试了一遍，发现还是没有解决问题。 [...]
  • 2008-12-26, 首佳博客 writes: 你好! 我的侧边栏也很奇怪啊.在IE下面浏览时,主页的侧边栏看不见.其它页面及文章都正常. FIREFOX下就正常.
  • 2008-12-28, 阿德 writes: firefox正常说明你的css是规范的。 你看一下css文件里面涉及到侧栏大小，位置的代码，看看是不是有 * 开头的代码行，如： #content { padding: 0px 0px 7px 25px; float: left; width: 670px; *wide: 680px; overflow: hidden; } IE应用的是带星号的那一行。 如果没有的话，你试试用这个办法加上针对IE的CSS吧。
  • 2009-01-13, yuelin writes: :mrgreen: 谢谢此篇文章解决了问题。 设置的摘要，把文章中下面的一个 给去掉了 ，导致侧边栏显示在下边。
  • 2009-01-13, 阿德 writes: u are welcome!
  • 2010-09-28, Anonymous writes: :cry:

Related posts:

[原文链接：http://blog.delai.me/2008/07/wordpress-sidebar-error.html] ]]> http://blog.delai.me/2008/07/wordpress-sidebar-error.html/feed 14