CSS中对各浏览器兼容的心得整理

对CSS在各浏览器中遇到问题的记录和整理

 

2011-3-18

 

position：

1、div的position使用relative的时候，是基于前一个元素（同级），而不是基于父节点，这与我原先的想法是不一致的。

2、使用relative在IE7下表现良好，但是在IE8/FF/Chrome下居然会直接影响到父节点的下一个兄弟元素，具体表现就是会将下一个元素向下推，导致div中有空隙（大小估计取决于使用relative的元素大小和多少），所以relative模式使用需要谨慎

 

DIV中的Table

IE7下表现良好，IE8/FF/Chrome就会在div的上边缘和table之间有一个5px左右的空隙，不同的是IE8下无法调整，margin失效。。=_=!，FF/Chrome可以使用margin来定位，但是又会造成IE7下显示错误，目前没有找到替换或解决方案（包括Hack）

 

td中的div

这个在IE8/FF/Chrome下表现良好，table的边缘和td贴合紧密，margin使用正常，但是在IE6/IE7下会导致td的大小根本无法准确定义（会挤得变形），而且最致命的是当td中含有过大的元素，如div或是input，宽度超过一定比例（比如95%）时，会导致td的左边绘制错误（估计是计算屏幕更新区的BUG），这一点在table中td在自动调整后尤为明显