我的工作部分涉及 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 了。
评论 (0)