IE6, IE7, Firefox在media="print"的时候对于position=absolute的处理迥异.
其中一个很严重的问题是IE下面,print的时候对于postion=absolute这种脱离文档流的页面会有截断现象.
如宽度过长横向截断, 又如页面最后一行或第一行截断, 如下图:

但有时候Firefox不写position=absolute反倒会只显示一页并且最后一行截断, 反而要加上这个设定才能正常.

所以切记, 不要在IE中print的时候做任何脱离文档流的设定, 如position=absolute或者float.
在Firefox中遇到问题则可尝试设定脱离文档流.
以后如果遇到这种情形也应该先排查是否属于此种情形.

同时的,在IE7/Firefox中, 在print的时候如果文档中有设定宽度超过纸张宽度,在默认的Shrink To Fit模式下,字体会缩的很小. 而在IE6下则显示为超过部分被截断.
因此解决方法显而易见应该是去除原宽度设定, 改为使用width=100%(也可以视情形而定).

也许是我落伍了, 居然现在才遇到这个bt的bug:

table {
    padding:10px;
}

居然无法生效. 似乎除了在外面套一个div或者把里面的东西手工的做出margin外没什么更好的办法. sigh.
唯一庆幸的是IE8已经解决了这个问题.

而坏消息是IE6还占据60%的市场.

想到一个迂回的方法, 当table本身不要求border的时候, 可以用border来代替padding.

table {
    border:10px;
}

真实的需要table padding的原因其实是为了提供一个背景, border占位效果其实是一样的.

<style type="text/css">
ul {
    margin:0;
    padding:0;
    padding-top: 100px;
    width: 170px; /*宽度改大就没问题*/
    float:left;/*为了在firefox上看上去正确*/
    background: #eee; /*为了方便看效果*/
}
li{
    width: 170px;
    float:left;
}
a:hover{
    background: #000;/*这条不写就不会有问题*/
}
</style>
<ul>
    <li>
        <a href="#">Column 1 SubItem 1</a>
    </li>
</ul>

以上是重现问题的最小代码. 当鼠标移动到链接上后, ul的下面突然多出一块, 多出部分高度是等于ul的padding-top大小, 通过IE8的IE develop tool观察layout发现多出部分是被加到了ul的height里. 如果设置ul的height大小小于li的总大小, 则有问题, 否则OK.
IE7/IE8标准模式, firefox都OK.
在IE6, IE7/IE8的quirks模式下都有问题.

如果把UL的width去掉就没问题.

相信问题出在IE对float情形下, 外围具有宽度的情形下, 对子元素的宽度总和计算出错, 导致认为子元素一行显示不下而要显示到第二行去.
证据是, 当width改到173(为什么171和172不行?)

但似乎background又和IE的layout属性有什么关系?
IE的bug真的是很让人头疼.

更新: 查证确为IE bug, 描述为float元素的宽度之和要小于100%,否则无法正确显示,最好小于99%.

在jQuery中

$tabDivs.addClass(‘tab‘);
$tabDivs.hover(function(){
    $(this).addClass(‘tabHover’);
}, function(){
    $(this).removeClass(‘tabHover’);
});

是很常见的代码,一个div具有tab class,当鼠标移上去时具有tabHover class,移出时失去tabHover class, 一般的,tabHover具有background属性.

从来没有想过有一天这种写法居然会失效, 原因是tab后于tabHover在style中定义.

一个简单的实验说明问题:

<style type="text/css">
.blue{
    background:blue;
}
.red{
    background:red;
}
</style>
<div class="blue red">test1</div>
<div class="red blue">test2</div>

显示的结果全部是红色背景,因为red后于blue定义在style中.换言之, blue后于red定义的话,就会全部显示蓝色.

说穿了,其实是很简单的道理, 所谓 覆盖 是也.

所以前面的js代码就诡异的不好用了.

结论是,以后类似情况下,要注意多个class定义的顺序,或者是尽量避免不同class具有相同属性.

<input type="button" value="open this page in new window" />

修改为

<input style="overflow: visible;" type="button" value="open this page in new window" />

可以看出当文字长度很长的时候,button的长度默认被撑宽很长,当添加overflow:visible以后可以更好的贴合. 而overflow:visible的功用其实是重置了input的haslayout属性,具体情形看这里http://old9.blogsome.com/2006/04/11/onhavinglayout/ (内容最新,但被墙) , 或看这里http://www.blueidea.com/tech/site/2006/3698.asp (内容不是最新的). ie的layout属性造成了很多麻烦,以前也陆陆续续遇到了很多,不过都没记下来,以后补充. 再发一个在IE6,7,8, Firefox, Opera里显示都一致的按钮, 银白色边框,按下有按下效果.

代码是

.button {
    vertical-align: middle;
    cursor: pointer;
    width: auto;
    overflow: visible;
    font: bold 11px Arial, Helvetica, sans-serif;
    color: #F5F5F5;
    background-color: #626262;
    outline: 1px solid #626262;
    border: 1px solid #FFF !important;
    border: 3px double #626262;
    outline-bottom: 1px solid #626262;
    border-bottom: 1px solid #626262 !important;
    border-bottom: 1px solid #626262;
    padding-left: 4px;
    padding-right: 4px
}