Question

查看此示例fiddle（我使用的是Chrome 33）

同一个对象上的CSS和Javascript设置缩放是一致的，而不是像普通样式那样应该通过覆盖...并以有选择的方式。

CSS

#text { zoom: 0.8}

HTML

<div>
    <div id='text'> text </div>
    <div id='other'> text fixed zoom 1</div>
</div>

^ css zoom 0.8的元素看起来大小为0.8。大。

var texty = document.getElementById('text');
texty.style.zoom = 1;

^ css zoom 0.8和javascript（因此内联）缩放为1的元素看起来大小为1.很棒。

我希望，javascript设置的内联样式应该优先。

texty.style.zoom = 0.8;

^ 但是css zoom 0.8和javascript zoom 0.8的元素看起来也是1。（0.8 / 0.8）。为什么现在一起工作？

链接的小提琴将javascript设置的缩放值从0.8切换为1，但没有发现显示上述问题的视觉差异。我想知道为什么会这样，以及如何解决它。

这样做的目的是使一系列渲染的html卡以默认的0.8进入页面，并且由于它们以编程方式选择，它们“缩放”到1，然后当它们被传递时它们被“缩放”回到0.8但是这回归了。对于添加到列表中的新卡，不断扫描li的感觉是浪费，因此我想要一个默认的缩放：通过css设置0.8。

Answer 1

我检查了最新的Chrome它不能正常工作。我怀疑这是一个错误。但您可以通过将其设置为稍微不同的值来解决它。例如，在您的情况下，您可以将其设置为0.79，它将起作用。

Answer 2

CSS标准中没有zoom属性，最高为CSS3。

它最初是IE的专有CSS标准，但后来被其他浏览器采用。它在理论上适用于所有主流浏览器（虽然Firefox有自己的语法），但事实证明它在Chrome 33中不能很好地运行。另一个证明，不建议在生产现场使用。

如果要缩放内容，可以使用CSS transforms。

P.S。如果您将文字更改为图片，则Chrome中的。

建议您使用以下图片：

#test img {
  height: 100%;
  width: 100%; /* change from 100% to 80% for zoom: 0.8; effect */
}

对于文字，您只需更改font-size（为了便于阅读，您可能也想更改line-height。