文件选择（input type=”file”）是一个常用的元素（虽然我比较少用），在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同（Safari 和 Chrome 同是基于 Webkit，故不再详说）。
对于文件选择元素，可以分为2部分，一部分是按钮，一部分是文字展示，如图1：
下面图2～图5是4个浏览器对于3个不同状态下的文件选择元素的呈现：
其中：第一个是默认状态下选择了一个文件；第二个是设定了 300px 的宽度；第三个设定了 50px 的宽度；
在 IE6 中 block 空元素高度无法直接通过 height 设为0，具体和字体大小、行距有关，一个简单的解决方法是设置 oveflow 为 hidden。
Reference:
当访问某个网站时，不经意中，就被别人猜测到你是否访问过某个网站，而这却没有什么技术性的东西，也不算是违法的行为。
奥秘在于浏览器对于访问过的链接会用伪类 :visited 来标识。
那么很容易想到的一个方法就是，用 a:visited 来设定一个特定的颜色值，比如 red。然后从一个 URL 列表中来动态创建一个链接，然后获取其颜色（各浏览器返回的结果不完全一致，可能是 rgb 值，也可能是 hex 值），如果跟设定的颜色一致，那么就可以确定用户在当前浏览器访问过该链接。
实际测试中会发现，新版本的浏览器（如Chrome 14, IE9, FF5）对于 a:visited 的样式是成功应用的，但获取到的颜色却不是对应的设定，而是 a:link、a 甚至是默认的颜色，从而无法判断用户是否访问过该链接。这是现代浏览器在这方面的安全保护，一方面使样式可以正常生效，另一方面却防止了 JS 窃听。然而，在一些旧版本的浏览器（比如IE6~8, FF3）上面却没有这个保护措施，因而可以判断出是否在该浏览器上访问过该链接。
对于以上依赖于 JavaScript 的窃听，很容易想到的一个防止方法就是禁止 JavaScript 的运行。没错，抛开种种不便来说，的确可以达到防止以上窃听的目的，即便是 IE6 等老一代浏览器。但是，却防止不了 CSS 的窃听方式。
又是如何利用 CSS 来进行判断窃听的吗？ （更多…）
页内跳转，在我这里，其实就是锚跳转（包括回到顶部、直达底部、阅读评论这三个），只是做了些美化和 JS 效果而已，最终效果见页面右侧（单页和非单页有所不同）。
一开始，我是直接把 HTML/PHP 代码放进 footer.php 文件中的，后来采用 hook 的方法。虽说，就得到的 HTML 结构来说，可能不是非常好；但个人感觉比直接修改 footer.php 好。
HTML/PHP 代码
<?php
// add updown access, needs hook wp_footer() in footer.php
function up_down() {
?>
<div id="updown">
<a href="#" title="返回顶部" id="goUp"></a>
<?php if(is_single()):?>
<a href="#comments" title="阅读评论" id="goComments"></a>
<?php endif;?>
<a href="#footer" title="直达底部" id="goDown"></a>
</div>
<?php
}
add_action('wp_footer', 'up_down');
?>
使用这种方法，需要 footer.php 文件中有调用到 wp_footer() 函数，否则是无法 hook 的。
（更多…）
在对主题评论列表处理的过程中，突然发现嵌套回复性能低下，页面拖动也一卡一卡的。排除法后锁定了目标——box-shadow。
于是做了一些实验，发现如果大量使用box-shadow，又或者容器比较大的时候，性能都会降低很多。如果容器不是很大，数量不是很多，倒没多大的感觉。
如果将box-shadow应用到评论列表中，这个问题就比较明显了，特别是在评论不分页、支持嵌套的情况下。
无论是Firefox还是Chrome，对box-shadow的支持都存在这个问题，Opera则好上很多，带来的迟滞感不是很强。
模仿评论列表小小地做了一个Demo，可以体验到带box-shadow和不带box-shadow的明显区别。
Firefox同时使用outline和boxshadow时会出现outline被shadow撑开的bug，Chrome、Opera不存在此问题。
如以下代码：
<style type="text/css">
#ffbug{
margin:30px auto;
width:200px;
height:200px;
border:2px solid blue;
outline:5px dotted green;
box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
-webkit-box-shadow: 0 0 10px red;
}
</style>
<div id="ffbug">
蓝色为border<br />
绿色为outline<br />
红色为box-shadow<br /><br />
Firefox会将box-shadow的宽度计算进width中，从而导致border变化，于是outline偏移。
</div>
属性如下：
box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色
网上关于这个的教程很多，随便搜搜都有，不过看过之后最好实践一下，我这里就不说教程了，贴张图看看：
提醒一下的是不能直接对图片使用inset（内阴影）效果，昨晚我在这里纠结了好久好久。
然后放上个Demo（IE就不用尝试了，嗯，有IE 9的可以看看如何。如果看到乱码，在浏览器中将编码改为utf8即可）。
最后是一点参考资料：