css hack 是个很有争议的东西，一开始我也很讨厌，因为我觉得可以饶过 css hack，通过另外的方法解决问题。但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。
在公司，电脑里的浏览器是 ie6，除了开发部和技术部外，其他部门的同事很少装其他浏览器（不过有小部分可能会升级到 ie7/ie8）。而开发部和技术虽然会装 ff，但装好之后一般不会升级，因为他们不一定是前端开发人员，他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常，所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的，因为我做的东西除了在 op 下可能会有些差异外，在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6，所以如果要修复的话，会把我给郁闷坏，因为我不仅要针对浏览器修复，还有可能要针对浏览器版本修复。如果是你的话，你会头疼吗？所以我收集了一些我认为是比较简单方便的 css hack，一来是自己在工作可能需要，二来算是分享吧。这些 css hack 注意顺序一起使用，能区分不同的浏览器和版本。当然，如果你没必要考虑这么复杂的情况，就挑选需要的用咯。通过实例来体现吧。
html 代码
<body> <p>您的浏览器是</p> </body>
css hack 代码
p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;}
p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */
p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]} /* for sa/ch */
p { background:url(llq.gif) 90px -50px no-repeat\9;} /* for ie */
*+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */
p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */
因为没有找到 op10 的 css hack，所以标准的写法是给 op10 的，然后针对其他浏览器写 css hack。
另外，在修复过程中，我发现了网上流传的一个 css hack 有问题，这个 css hack 也许有很多人在用，就是[属性：值\0]，有的人说这是 ie8 专用的，但我在测试过程中发现这个 css hack 除了 ie8 识别外，ff3 和 op10 也能识别（ff2 和 ff3.5 不能识别）。你可以使用对应的浏览器（如果你有的话）点击这个例子查看。
所以有些 css hack 还是尽量在多个浏览器里测试测试，以免误导别人。
注：op 代表 opera，sa 代码 safari，ch 代表 chrome。
修改：自动播放的 jQuery 幻灯片
日期：2009-10-11 | 分类：javascript/jQuery
一位读者在《自动播放的jQuery幻灯片》中反映了一个问题，就是鼠标在缩略图上快速反复移动的时候，会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程，鼠标每经过一张缩略图都会执行这个动画过程，如果上一个动画过程还没执行完鼠标就移到另一张缩略图上，那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动，那将会“累积”很多动画，它们会一个接一个的执行，所以引发上上面那些问题。
要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）：
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
if(!$(this).is(':animated')){
t($('#pic_list img').index($(this)));
}
})
})
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}
用 js 模拟 css 属性选择器
日期：2009-09-21 | 分类：CSS
CSS 的属性选择器是很有用的，它能有效的减少类的使用，但众所周知，IE6 是不支持 CSS 属性选择器的，为了兼容 IE6 ，一般的做法还是给需要的元素额外加类。如果是静态页面，那还好处理，直接在需要的元素上加上类，但如果是动态内容或其他因素影响，不能确定要在哪个元素上加类，那就比较棘手了。这个时候用 js 来处理应该是比较好的，方法也许您也想到了，就是：获取元素属性的值，然后判断值是否包含指定的字符串，如果包含就加上类。
做一个列子吧，就拿最近做的一个东西来做吧，是一个列表，如果这个列表中的某个连接是直接打开 pdf 文件，就给这个链接后面加上 pdf 的小图标，以示提醒作用。看代码吧，XHTML 和 CSS 代码就省略了，看主要的 JS 代码：
window.onload = function(){
var list = document.getElementById('list');
var listA = list.getElementsByTagName('a');
for(var i = 0; i < listA.length; i++){
var href = listA[i].href;
if(href.indexOf('pdf') != -1){
listA[i].className = 'haspdf';
}
}
}
因为这段代码主要针对 IE6 及以下版本，所以可以加上 IE 条件注释。
CSS Expressions 有多可怕
日期：2009-09-8 | 分类：CSS
CSS Expressions 俗称 CSS 表达式，避免使用 CSS Expressions 是前端开发的一个重要指南，为什么要避免使用 CSS Expressions 呢？我们看看雅虎YUI的说明：
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕，那就引用子鼠的例子来实际说明吧：
XHTML 和 JS 代码：
<body>
计算了<input id="c" />次
<script type="text/javascript">
var k = 0;
function test() {
k++;
document.getElementById('c').value = k;
return;
}
</script>
<div>
<ul>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
<li><a href="11111111111111111111">22222</a></li>
</ul>
</div>
</body>
JS 代码是用来计算 CSS Expressions 的计算次数。
CSS Expressions 表达式代码：
body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block;
border:1px solid #FF3366;
width:expression(this.offsetWidth > 750 ? test() : test());
}
查看Dome （用 IE6/IE7 查看）
从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁，由此可见它的可怕。
子鼠还提供了一个稍好一点的写法：
body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block; border:1px solid #FF3366;
width:expression(function(abc){
abc.style.width = "750px";
test();
}(this));
}
查看Dome （用 IE6/IE7 查看）
另外 CSS Expressions 的兼容性很差，所以 CSS Expressions 能不用就不用。
自动播放的 jQuery 幻灯片
日期：2009-09-3 | 分类：javascript/jQuery
读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果，其实写好之后不久就觉得少了点什么，看来看去，最后发现就是缺少自动播放效果，想找个时间把自动播放的效果加上，但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题，就抽时间写一下吧。
结构和样式都没有变，只有 jQuery 代码有变，具体的代码如下：
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
t($('#pic_list img').index($(this)));
});
});
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}
