当前位置: 首页 > 设计 > 正文
avatar

PJBog的很多主题的日历都出现了错位,我们可以用CSS reset来解决PJBlog IE8下日历错位的问题

如果经常用IE8(就是指IE8,不是那些借用IE8内核的浏览器)来看我博客的朋友会发现,以前上我博客的时候不会出现兼容性视图的按钮,

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

这段兼容性代码,这样做的好处就是减少了对IE8的考虑,让它兼容IE7就行了,不过现在上我博客的时候发现兼容性视图的按钮又出现了,那也就意味着从现在开始本站开始全面兼容IE8了。

IE8的出现,给PJBlog的皮肤带来了一些兼容性方面的问题,最为突出的2个地方就是:博客日历和文章页上一篇下一篇的位置。这也是论坛上对这2个地方总是提出疑问。现在有了很好的方法来解决这个问题——css reset。

我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。对于css reset 大家也可以Google一下。

论坛上的dudumao曾经用* {margin:0px;padding:0px;border:0px;}来解决IE8下日历的问题,不过用这个的话会出现一些新的问题,当然这些问题是细微的,就是比如我准备发表一篇文章,在选择日志分类上的会没有了那个外框,前面的1,2,3会在边框外面,对于追求完美的看着肯定不舒服的(不追求完美的请路过)。

完美的解决方法是:将global.css里面的

img {max-width: 100%;height: auto;}

删除(可能有的和这个不全一样,就是img{}这段删除),换上下面的就可以了。

img,div,form,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;}

li{ list-style-type:none;}

这段css可以将2个问题都解决了,日历和文章页上一篇下一篇的位置的错位问题。

其实

* {margin:0px;padding:0px;border:0px;}

也是css reset的一种,只是这里用有点小问题而已,很多大型网站都有css reset,想了解更多的可以看看这方面的资料。

本文固定链接: http://www.weisay.com/blog/css-reset-solve-pjblog-ie8-mistaken.html | 威言威语

css reset 解决PJBlog IE8下日历错位的问题:目前有9 条评论

  1. avatar
    8楼
    lovetimi Internet Explorer Windows

    * {margin:0px;padding:0px;border:0px;} 这段代码放到哪里?

    2011-01-10 23:42 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      * {margin:0px;padding:0px;border:0px;} 是一种方法。

      img,div,form,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;}
      li{ list-style-type:none;}
      也是一种方法。
      放在 global.css 里面

      2011-01-11 15:42 [回复]
  2. avatar
    7楼
    汽车衡 Unknow Browser Unknow Os

    这只有在IE中才能有效果
    火狐就不行了

    William 于 2010-04-27 09:53 PM 回复
    理论上本来只有IE8会出现日历错位的现在,FireFox下是正常,当然是看不到效果的了。

    2010-04-27 15:58 [回复]
  3. avatar
    6楼
    阿哩魔力 Unknow Browser Unknow Os

    来一下威言,非常感谢你的帮助。

    2010-04-16 22:52 [回复]
  4. avatar
    5楼
    青春挽歌 Unknow Browser Unknow Os

    恩,学习了!

    2009-11-10 20:55 [回复]
  5. avatar
    4楼
    青春挽歌 Unknow Browser Unknow Os

    这种方法如何?www.mubenwuxin.cn/blog/article.asp?id=21

    William 于 2009-11-10 08:34 PM 回复
    你说的那个方法我已经不用了,如果用全静态光在header.asp里面添加那段还不够,我那个方法旨在不用再添加那些多余的兼容代码了,并不是每个人都知道要加那个兼容代码的~

    2009-11-10 17:33 [回复]
  6. avatar
    地板
    DECLAN Unknow Browser Unknow Os

    Knowledge is power!谢谢,长见识了

    2009-11-10 16:09 [回复]
  7. avatar
    板凳
    海天无影 Unknow Browser Unknow Os

    呵呵 我还没用IE8呢 不过其他浏览器 貌似还正常~

    William 于 2009-11-09 04:50 PM 回复
    其他浏览器是正常的,就是只有IE8下才会出现问题~

    2009-11-09 14:52 [回复]
  8. avatar
    沙发
    feln Unknow Browser Unknow Os

    这不又学到了些东东

    2009-11-08 22:21 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter