本应放在网站管理区,先放首页希望引起大家注意
今天终于有点时间好好收拾一下我的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放上来以供参考:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
h1 {
}{
margin : 0px;
margin-top : 10px;
margin-bottom : 5px;
font-size : 24px;
line-height: 200%;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
h2 {
}{
margin-top : 10px;
margin-bottom : 3px;
font-size : 18px;
}
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
h3 {
}{
font-size : 16px;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
h4 {
}{
font-size: 14px;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
p {
}{
margin: 10px 0px;
text-indent: 20px;
line-height: 150%;
}
.CalTitle
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
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
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color : #014E82;
color : White;
}
.CalDayHeader
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
background-color:#186AA2;
color : White;
}
div.News
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 5px;
padding-left: 10px;
}
.HeaderBar
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
font-weight: normal;
border-collapse: collapse;
background-image: url(images/BlueTabBack.gif);
background-repeat:repeat-x;
}
.BlogStatsBar
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
text-align:right;
font-weight: normal;
color: Silver;
border-collapse:collapse;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
p.date {
}{
font-size : 11.5px;
font-weight : bold;
margin-bottom : 0px;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 4px;
text-align: right;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
blockquote {
}{
font-size : 11.5px;
font-style : italic;
}
div.postFoot
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
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;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#leftmenu h3 {
}{
font-size : 11.5px;
margin : 0px;
margin-top : 10px;
padding-bottom: 2px;
padding-left: 3px;
border-top: solid 1px Gainsboro;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#leftmenu ul {
}{
font-size : 11.5px;
list-style: none;
margin : 0px;
padding-left : 5px;
margin-left : 5px;
margin-bottom : 10px;
}
#leftmenu a
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
padding: 1px;
text-decoration: none;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#footer {
}{
font-size : 11.5px;
margin : 0px;
padding-top : 5px;
text-align : center;
}
#CommentForm
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
input, textarea
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.CommentForm
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
}{
font-size : 11.5px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#leftmenu {
}{
position : absolute;
left : 0px;
width : 200px;
height:auto;
background-color: WhiteSmoke;
padding-top: 0px;
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
#main {
}{
margin-left : 200px;
background-color : White;
padding : 10px;
border-left : 1px solid #555;
border-bottom : 4px solid Black;
}
博客园的小“Bug”
在设置过程中无意发现了一个样式小“Bug”,希望dudu闲暇时能够调整一下。在博客园左侧用户可以选择“用户评论”、“阅读排行榜”等内容,有些是原有.Text带的,而有些是博客园自行开发的,博客园自行开发的一些组件在FireFox中会出现显示超边界的问题。如下图:
![](/images/cnblogs_com/zhenyulu/DBApp/Picx00156.gif)
不管如何调整CSS都无法进行控制(IE中不存在这个问题),后来查看网页源代码找到了问题所在:
最新评论的HTML代码为:
<h3>最新评论</h3>
<div class="RecentComment">
<ul>
<li style="word-break:break-all">
![](/Images/dot.gif)
![](/Images/dot.gif)
</li>
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
而阅读排行榜的HTML代码为:
<h3>阅读排行榜</h3>
<div class="RecentComment">
<ul style="word-break:break-all;width:100%">
<li>
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
里面的style是硬编码进去的,无法通过CSS进行设置。关键的问题就出在阅读排行榜的style多了一个“width:100%”,正式因为这个造成FireFox无法正常实现换行的(也许是FireFox的Bug)。追其原因可能是Visual Studio .net的HTML编辑器自动加上了width:100%的样式。
类似问题还出现在“评论排行榜”等组件中,我猜测这些组件是博客园自行开发后加上去的。所以dudu有空的时候是否可以考虑将这个width:100%去掉以确保FireFox浏览器中的浏览效果呢?
也许我真的有点吹毛求疵,不过最终的目的只有一个,就是希望博客园越办越好!