Html 如何在firefox中模拟css缩放？

我将此代码用于我的站点中的菜单，但现在通过跨浏览器测试，我发现它与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;
} 

正如您在中所看到的，我尝试了多种解决方案，但我需要列表项根据a:before元素更改宽度和高度，并且使用scale（）指令，li维度不会更改

---

在Firefow中有一个解决方案，但不修复li维度

没有像

zoom

这样的CSS标准属性

您编写的代码在现代浏览器中不起作用的原因是，您缺少几个属性的非固定（标准）变体。例如，当使用

变换时

：

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

---

我主要使用JavaScript来模拟zoom。由于Firefox是唯一一款不支持它的现代浏览器，我偶尔会在没有它的情况下使用它，因为它不会对可用性产生负面影响

下面是一个通用解决方案的快速而肮脏的版本：

缩小元素

if（！（'zoom'in document.createElement（'div'）.style））{
设置间隔（（）=>{
缩放。forEach（e=>{
常量比例=数字（例如getAttribute（'data-zoom'））
e、 style.transform='无！重要'
e、 style.marginRight='0！重要'
e、 style.marginBottom='0！重要'
const width=e.clientWidth
常数高度=e.clientHeight
e、 style.transform=`scale（${scale}）`
e、 style.transformOrigin='0'
常量上拉=高度-高度*比例
const pullLeft=宽度-宽度*比例
e、 style.marginBottom=`${-pullUp}px`
e、 style.marginRight=`${-pullLeft}px`
})
}, 100)
}

我刚刚找到了一个快速而肮脏的解决方案，但它适用于我的用例，因此它也可以帮助其他人

.zoomed {
  zoom: 0.5;
}

变成

.zoomed {
  transform: scale(0.5);
  margin: -50px;
}

其中50px是

缩放的
宽度的1/4

当然，这种方法有很多局限性-它会覆盖任何以前的
转换
和
边距
，您必须手动为每个元素插入负边距（或使用JS计算），可能还会更多

但正如我所说，它适用于我的特定用例。
zoom是一种非标准的，在中不受支持FF@Shyghar在发布这个答案之前，我看到了你的小提琴，甚至玩过了。你是什么意思？@feeela在我的小提琴里有一条规则（ul.small li a:before）和你发布的确切代码。在我的问题中，我问是否有一种方法可以根据a:before维度更改li维度。缩放变换不会这样做。所以你的答案是在我的问题中。@Shyghar…但是从你问题的版本历史来看，这个答案只是在我发布后添加到问题中的。所以我回答了那个问题，你复制并粘贴了这个问题的答案，然后告诉我，它已经在那里了。是的，当然。我也不明白。表示“与CSS变换不同，缩放会影响元素的布局大小。”这很重要，因为
transform:scale
不会更改布局大小，但
zoom
会更改布局大小。我无法找到一种使用标准CSS的解决方法，它可以精确地实现zoom在布局大小方面的功能。fireFox不支持使用CSS的zoom属性