让你的Blog在FireFox中正常显示，以及博客园CSS样式的一个小Bug

本应放在网站管理区，先放首页希望引起大家注意

今天终于有点时间好好收拾一下我的Blog了，以前总是发现使用FireFox访问的博客园与使用IE访问的显示效果差别很大，今天自己重新设置了一下css样式，让FireFox中的显示效果更漂亮一下。经过调整后发现，有些东西可以通过调整CSS实现，而另外一些问题却是博客园的“Bug”了（说是Bug有点吹毛求疵了）。

CSS调整方式：

以我选用的Cogitation Skin为例，在博客园选项页面中选择Configure，对Custom CSS Selectors进行设置，我修改的内容主要包括：（1）所有字体是11px的在FireFox中显示都小一号，全部改成11.5px。（2)博客园添加google广告后，左侧leftmenu原有的180px宽度就有些不够了，调整CSS，让leftmenu宽度为200px，main区域从200px开始显示。（3）Cogitation Skin中对和h1、h2、h3、h4样式的设置不能充分体现各标题的效果（标题4的字体甚至比标题1的字体还要大），因此重新进行了设置。（4）为了自动实现首行缩进的效果，我更改了段落标签<p>的样式，添加了text-indent: 20px;实现首行缩进。

将我的Custom CSS Selectors放上来以供参考： 

h1 {}{
    margin : 0px;
    margin-top : 10px;
    margin-bottom : 5px;
    font-size : 24px;
    line-height: 200%;
}
h2 {}{
    margin-top : 10px;
    margin-bottom : 3px;
    font-size : 18px;
}

h3 {}{
    font-size : 16px;
}
h4 {}{
    font-size: 14px;
}
p {}{
    margin: 10px 0px;
    text-indent: 20px;
    line-height: 150%;
}
.CalTitle
{}{
    background-color : #014E82;
    border-color:#ADF;
    font-family:Arial;
    font-size: 13px;
    font-weight:normal;
    color : White;    
    margin-left : 0px;
    padding : 0px;
    height:100%;
}
.CalNextPrev
{}{
    background-color : #014E82;
    color : White;    
}
.CalDayHeader
{}{
    background-color:#186AA2;
    color : White;    
}
div.News
{}{
    font-size : 11.5px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 5px;
    padding-left: 10px;
}
.HeaderBar
{}{
    font-size : 11.5px;
    font-weight: normal;
    border-collapse: collapse;
    background-image: url(images/BlueTabBack.gif);
    background-repeat:repeat-x;
}
.BlogStatsBar
{}{
    font-size : 11.5px;
    text-align:right;
    font-weight: normal;
    color: Silver;
    border-collapse:collapse;
}
p.date {}{
    font-size : 11.5px;
    font-weight : bold;
    margin-bottom : 0px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 4px;
    text-align: right;
}
blockquote {}{
    font-size : 11.5px;
    font-style : italic;
}
div.postFoot
{}{
    font-size : 11.5px;
    background-color: WhiteSmoke;
    border-top: gainsboro 1px solid;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 1px;
    padding-top: 1px;
    text-align: right;
}
#leftmenu h3 {}{
    font-size : 11.5px;
    margin : 0px;
    margin-top : 10px;        
    padding-bottom: 2px;
    padding-left: 3px;
    border-top: solid 1px Gainsboro;
}
#leftmenu ul {}{
    font-size : 11.5px;
    list-style: none;
    margin : 0px;
    padding-left : 5px;
    margin-left : 5px;
    margin-bottom : 10px;
}
#leftmenu a
{}{
    font-size : 11.5px;
    padding: 1px;
    text-decoration: none;
}
#footer {}{
    font-size : 11.5px;
    margin : 0px;    
    padding-top : 5px;
    text-align : center;
}
#CommentForm
{}{
    font-size : 11.5px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
input, textarea
{}{
    font-size : 11.5px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;    
}
.CommentForm
{}{
    font-size : 11.5px;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#leftmenu {}{
    position : absolute;
    left : 0px;
    width : 200px;
    height:auto;
    background-color: WhiteSmoke;
    padding-top: 0px;
}
#main {}{
    margin-left : 200px;    
    background-color : White;
    padding : 10px;
    border-left : 1px solid #555;
    border-bottom : 4px solid Black;
}

博客园的小“Bug”

在设置过程中无意发现了一个样式小“Bug”，希望dudu闲暇时能够调整一下。在博客园左侧用户可以选择“用户评论”、“阅读排行榜”等内容，有些是原有.Text带的，而有些是博客园自行开发的，博客园自行开发的一些组件在FireFox中会出现显示超边界的问题。如下图：

 

不管如何调整CSS都无法进行控制（IE中不存在这个问题），后来查看网页源代码找到了问题所在：

最新评论的HTML代码为：

<h3>最新评论</h3>
<div class="RecentComment">
   <ul>
      <li style="word-break:break-all">
         
      </li>

而阅读排行榜的HTML代码为：

<h3>阅读排行榜</h3>
<div class="RecentComment">
   <ul style="word-break:break-all;width:100%">
      <li>

里面的style是硬编码进去的，无法通过CSS进行设置。关键的问题就出在阅读排行榜的style多了一个“width:100%”，正式因为这个造成FireFox无法正常实现换行的（也许是FireFox的Bug）。追其原因可能是Visual Studio .net的HTML编辑器自动加上了width:100%的样式。

类似问题还出现在“评论排行榜”等组件中，我猜测这些组件是博客园自行开发后加上去的。所以dudu有空的时候是否可以考虑将这个width:100%去掉以确保FireFox浏览器中的浏览效果呢？

也许我真的有点吹毛求疵，不过最终的目的只有一个，就是希望博客园越办越好！