实现 CSS 跨浏览器

我的工作部分涉及 UI 设计，尤其是实现页面样式，近来有遇到 CSS 跨浏览器的问题，特小结一下以备查阅。

padding 和 margin

问题：ul 标签中 FF 中有个 padding 值，却没有 margin 值，而在 IE 中正好相反。
解决方法：将 ul 的 padding 和 margin 都设为 0（也可以不是 0） 如：padding:0; margin:0; list-style:none; 另外 form 默认在 IE 中也会有 margin 值，所以最好也将其 margin 和 padding 设为 0。

cursor

问题：IE 中 cursor:hand 可以将鼠标设为手形，Firefox 下不行。

解决方法：都用 cursor:pointer。

单位

问题：任何距离的数值 IE 可以不加单位，Firefox 必须要求写单位（0 除外）。
解决方法：写全单位如 padding: 0;

高度

问题：如果设置了一个 div 的高度，当 div 里实际内容大于所设高度，IE 会自动拉伸以适应 div 容器大小，Firefox 会固定 div 的高度，超出 div 底线以外的部分会出现和下面的内容重叠的现象。

解决方法：控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置 overflow:hidden;

clear:both

问题：如果上面用 float 控制了 n 列 div，IE 下会自动检测自动排列，Firefox 下则可能到处乱动。

解决方法：float 结束后的下一个标签加 clear:both; 以结束 float 的控制。

实际像素

IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right) 所以排列多列表格时 IE 和 Firefox 显示宽度稍有区别。

移除点击交互元素的高亮背景

问题：我在移动设备上测试前面教程的图表实例时发现，当手指点击图表出现 ToolTip 时，图表容器的会出现一个半透明的高亮背景。设备浏览器不一样，颜色也不一样，很是影响交互效果。试了一下用 Javascript 来移除，花了一天时间也没弄出来，最后不得不 Google 了，又花了几个小时，终于用 CSS3 搞定了。代码如下：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新增了禁止选择文本的功能。其中，前两句对 WebKit 内核浏览器（Safari、Chrome、iPhone、iPad、Android 等）有效，后两句对 Gecko 内核的浏览器（Firefox 等）有效。

看来真该花些时间学学 CSS3 了。