CSS拾遗之用户界面样式

2016-09-05

zoom

zoom属性可以缩放元素, 它可以有三种值:

以前偶尔有看到别人网站的css有这样的设置zoom: 1, 不明白是干嘛的. 现在我明白了, 但看来根本用不上, 为什么这样说呢?

因为zoom活跃于IE6流行的年代, 主要作为IE的hack. 举个例子: display: inline-block在IE6/7当中显示有些问题, 设置zoom: 1就可以解决.

注意的是:

zoom并非标准属性,它最初是IE的产物, 只是后来有别的浏览器实现了它而已; 并不建议在实践中使用它, 如果要缩放, 请使用transform属性

经测试, Chrome与Safari是实现了zoom属性的, 但Firefox从头到尾就没有支持过, 可见Firefox是坚持跟着规范走的, 由此给我们的启示是: 不要使用zoom属性来实现缩放.

user-select属性可以设置元素是否可以被选中, 如果不能被选中, 当然就不可能被复制粘贴了

要注意的是两点:

一定要写浏览器前缀, 没有前缀的连Chrome52都无法生效
设置一段文本的值为none时, 连同文本的周围的元素也一起选中并复制的话, Webkit内核的浏览器会把禁止选中的文本也复制过来, Firefox则没有这种近乎bug的表现

最重要的是pointer-events: none时表现

这会阻止元素的默鼠标行为, 表现为:

另外, 元素本身会达到”虚化”效果, 使得鼠标可以点击被遮盖的元素, 详情请看下面的例子