今天查看源码是发现头部出现一条自动添加的inline样式，“.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}”，如图所示：

起初以为是插件添加的，关闭所有插件后该东西依然存在。后来查到原来是WordPress自动添加的，recentcomments，应该就是为调用最新评论的边栏插件应用的样式，由于我没有使用自带的评论调用，所以这对于我来说就是无用的，于是就设法去掉它。

(更多…)

当你看到这篇东西的时候，我已经不在电脑前了，你同时发现了页面上方那个蛋疼的通知框。

当初新浪微博的通知框是不会动的，你滚到下面了就看不到通知了，想提个意见，来不及提就出现了现在它这样的效果。虽然不是什么新鲜事了，估计人家也弄过这样的了，我就蛋疼蛋疼玩一下吧，为整年没玩过的东西开个头。

演示（或许）稍后跟进，好困，纯属扯蛋。//at 16:35

(更多…)

昨天算是做了一个在线笔试，其中一题“使用inline-block实现一个图片列表，要求兼容A级浏览器（差距1px内）”，然后发现IE6和其他浏览器出现以下差距：

(更多…)

浮动的元素不在文档流占据空间，如下图所示，里面的方框分别左右浮动，容器并没有被撑开。IE6除外，但也有需要清除的时候。

我说IE6除外只是因为此框框在IE6表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>

(更多…)

为了找到真理，原文基于vertical-align的表单元素垂直对齐方式研究不厌其烦地进行测试，此精神值得我们学习。

而结论也非常简单，看真相：

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

WordPress 默认使用的用来来对图像的对齐和块元素的类：

.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.wp-caption{background-color:#f3f3f3;border:1px solid #ddd;-khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px;padding-top:4px;text-align:center}
.wp-caption img{border:0 none;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

(更多…)

为了使用大部分 CSS3 特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分 CSS3 属性。而且不幸的是，一些属性甚至到最后都可能不被 W3C 推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的（当他们是多余的的时候使用符合标准的样式将之覆盖）。

最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari)， 它们以 -webkit- 开始，以及 Gecko 核心的浏览器(比如 Firefox)，以 -moz- 开始，还有 Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-) 都有它们自己的属性扩展（目前只有 IE8 支持 -ms- 前缀）。

被 CSS3 的动感所吸引，下午折腾了一下，成果就像你现在用 Chrome 或者 Opera 浏览本博并用鼠标经过文章标题的效果一样(FireFox下并不理想)。
使用的 CSS 如下:

h2{
	-moz-transform: translate(0px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(0px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(0px, 0px);
	-o-transition-duration:0.3s;
}

h2:hover{
	-moz-transform: translate(10px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(10px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(10px, 0px);
	-o-transition-duration:0.3s;
}

CSS3 吸引人的当然不只这个，折腾人的是因为它还未成为标准，还有各种不同标准的浏览器…

想把博客侧栏的目录列表 li 自动换行，但是在 IE6 中，当 li 标签会出现文本换行问题，如下图所示：

而且在 IE8 的兼容视图也有同样的问题，所以我之前使用 _weight 定宽只能把 li 在 IE6 下整齐排列，但 IE7、8就不行。其实解决方法很简单，使用 white-space:nowrap; 就可以规定段落中的文本不进行换行：)