transform:scale不缩小实际空间的问题

首先声明一点，transform: scale对行内元素无效，而对块级元素和原子行内级元素生效等。

在开发中，有时会因满足设计需要而对元素进行整体缩放，transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小，具体看下面的代码以及图片。

    
    
    


    
        B
        3920.00
    

绿色标注为缩小后留下的空隙 price位数越多占据实际空间越大

     解决方案：

（1）若不要红色按钮中的内容水平居中，可将transform-origin的值改为bottom left，即改变变化原点；

(2) 若是居中显示，可使用zoom，即将transform: scale(.7); transform-origin: right;替换为zoom: .7，zoom元素可以缩小实际所占空间，原为IE浏览器才支持的元素，现在Chrome和Safria也支持了