极湖

在做逐句播放的《论语》过程中，发现在 Opera 下有一个明显的缺陷：更新段落标题的时候，开头的大字不随着更新。

这个网页用CSS实现了一个开头字(字母)下沉的效果，CSS 是这样写的：

.item .title:first-letter {
  display:block;
  float:left;
  font-size:2.4em;
}

刚开始的显示没有问题，然而在更新内容的时候，第一个字没有跟着变，显示的一直是“论”字。

同样的代码，在 Firefox 2.0 和IE 7 下没有问题。在网上找了一下，没找到针对 Opera 解决办法，因此我想，这可能是 Opera 的 Bug 吧？如果不是 Opera 的 Bug，那就是 jQuery 的 Bug，两者必居其一。

有了以上的指导思想，问题也就基本上解决了。最后的笨办法是： 换标题的时候，先 removeClass，再 addClass。代码如下：

$("#chapter_title").html('新标题');
$("#chapter_title").removeClass('title');
$("#chapter_title").addClass('title');

这一次，Opera 和 IE 下正常，Firefox却不干了，更新标题的时候，所有的文字都不显示，这可有些恼人。还好，稍微调整了一下 HTML，就 OK 了。

今天过来一看，哎呀变了，My Opera！

我看到Opera给我们带来一个全新的SNS(Social Networking Service)。

界面更加人性化，我喜欢。

选择 Preference -> custom style sheet。

输入 CSS 代码：

/* 社区工具条 */
#community a#oc > span { content: "Opera社区"; }
#community a#oc + a { content: "帮助"; }
#community a#oc + a + a { content: "设置"; }
#community a#mess { content: "消息"; }
#community a#logout { content: "（退出）"; }
#community a#login { content: "（登录）"; }
#community a#signupnow { content: "（注册）"; }

/* 菜单 */
#menu_blog a { content: "博客"; }
#menu_archive a { content: "归档日志"; }
#menu_albums a { content: "照片"; }
#menu_links a { content: "链接"; }
#menu_friends a { content: "朋友"; }
#menu_about a { content: "关于我"; }
选择 Preference -> custom style sheet，在“Enter CSS:”下输入

/* 登录窗口 */
form#toplogin div#loginbox > a { content: "（注册）"; }
form#toplogin div#loginbox > a + a { content: "（忘记密码）"; }
form#toplogin div#loginbox input#forum-username + label > b { content: "用户名:"; }
form#toplogin div#loginbox input#forum-password + label > b { content: "密码:"; }
form#toplogin div#loginbox input#rememberme + label  { content: "保持登录状态"; }

/* 侧栏 */
#side div#qp > h2  { content: "个人档案"; }
#side div#qp .pad > dl > dt  { content: "姓名："; }
#side div#qp .pad > dl > dt + dd + dt { content: "地点："; }
#tagcloud > h2  { content: "标签"; }

/* 页脚 */
div#footer a#get { content: "开启自己的博客"; }
div#footer a#get + a { content: "Opera社区"; }
div#footer p a#o { content: "Opera社区"; }

/* 文章 */
div#firstpost p.sticky { content: "☆受关注的文章☆"; }
p.editthis strong > a { content: "编辑这篇文章"; }

/* 朋友 */
p#friendmenu > a { content: "邀请朋友"; }
p#friendmenu > a + a { content: "朋友列表"; }
p#friendmenu > a + a + a { content: "朋友圈"; }
div#myfriends > h2 { content: "我的朋友"; }

选取“Use my custom style sheet together with the current theme”，点“Save”就OK了。

* Opera下中文正常显示，IE和Firefox下似乎不行。