如何在Firefox中模拟CSS缩放？

Question

我在站点中的菜单上使用此代码，但现在跨浏览器对其进行测试，发现它与Firefox不兼容。

li {
    display: inline-block;
    list-style: none inside none;
    text-align: center;
}
li a:before {
    content:"";
    display: block;
    border-radius: 50%;
    width: 62px;
    height: 62px;
    background: #F00;
    margin: 0 auto 14px;
    transition: all .2s;
}
ul.small li a:before {
   -webkit-transform: scale(0.7);
   -moz-transform: scale(0.7);
   -ms-transform: scale(0.7);
   -o-transform: scale(0.7);
   background: blue;
}
ul.small-zoom li a:before {
    zoom: 0.7;
    background: green;
} 

[您可以在this jsfiddle中看到，我尝试了多种解决方案，但我需要基于a：before元素更改列表项的宽度和高度，并且使用scale（）指令更改维度。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9zSFYzei5qcGcifQ==” alt =“在此处输入图像描述”>

在Firefow中，有解决此问题的方法吗？

Answer 1

我主要使用JavaScript来模拟缩放。由于Firefox是唯一不支持Firefox的现代浏览器，因此我偶尔会在缺少Firefox不会对可用性造成负面影响的情况下使用它。

这里是通用解决方案的快速而肮脏的版本：

<div data-zoom="0.5" style="zoom: 0.5">
  Scaled down element
</div>

if (! ('zoom' in document.createElement('div').style)) {
  setInterval(() => {
    zoomed.forEach(e => {
      const scale = Number(e.getAttribute('data-zoom'))
      e.style.transform = 'none !important'
      e.style.marginRight = '0 !important'
      e.style.marginBottom = '0 !important'
      const width = e.clientWidth
      const height = e.clientHeight
      e.style.transform = `scale(${scale})`
      e.style.transformOrigin = '0 0'
      const pullUp = height - height * scale
      const pullLeft = width - width * scale
      e.style.marginBottom = `${-pullUp}px`
      e.style.marginRight = `${-pullLeft}px`
    })
  }, 100)
}

Answer 2

没有像zoom这样的CSS标准属性。

之所以无法在现代浏览器中进行编码，是因为您缺少多个属性的无前缀（标准）变体。例如，当使用transform：

时

-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);