UC浏览器对CSS存在一些“特殊照顾”

在实际开发中，我们发现了UC浏览器对CSS存在一些“特殊照顾”：

• 不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；

• 不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；

• 不支持width、height、padding、margin、line-height属性，也就是说，在UC

浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；

• 不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是

“满屏的”；

• 不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只

能看到“左对齐”。

• 支持background-color，但不支持background-image，也就是说不支持CSS背

景图显示，在UC浏览器你只能看到背景色。

• 不过，个人仍然认为，如今建设小屏幕移动设备网页，完全可依据WebKit引擎的浏

览器作为标准进行界面开发。

换句话说，我们设计支持UC浏览器的网页，而不是设计以UC浏览器为标准的网页。

这样做还有个好处，可以在大部分的手机浏览器上保证相对一致的样式。

而针对UC这种连float等标准CSS属性也不支持的浏览器，别过于纠结它！

但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序，严重建议HTML编码人员留意各个HTML标签的先后顺序。

因为只有在支持float、position属性的浏览器下，页面各个容器才可以任意浮动或层叠的。否则，浏览器将按HTML标签的先后顺序显示。

另外一些小屏幕移动设备网页设计的相关补充：

• 网站头(header)

• 考虑到小屏幕移动设备的一些特性，设计网页时，有些可以去掉网站头（包括LOGO、

全局导航什么的）。

• 比如flick的查看大图页面就去掉了网站头。

这里我自创了一句时髦的设计原则：“针对于小屏幕移动设备的界面设计，在某些指定任务的界面，应优先于让用户关注当前任务，而不是应用程序本身。” 这个原则是行得通的，同样适用于设计移动设备应用程序~

打个比方说，如果你在设计小屏幕移动设备访问的邮箱时，完全可以在写信、邮件阅读页去掉网站头~

• 链接聚焦（hover）

• 各个浏览器均自定义了链接的hover样式，比如有的浏览器给链接聚焦时加了边框，

有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。

• 鼠标事件（mouseover）

• 考虑到触摸屏操作，用户无法用手指进行over的操作，因此应禁止在应用于移动设

备访问的网页使用mouseover。