我有一个包含一些元素的 div。我希望 div 在悬停时进行缩放。它在 chrome 中运行良好,但在 safari 中发生了一些奇怪的事情。复选框和下拉菜单也被缩放。如何在 Safari 中修复它?
.box:hover {
transform: scale(1.03);
-ms-transform: scale(1.03);
-webkit-transform: scale(1.03);
-webkit-transition: all .01s ease-in-out;
transition: all .01s ease-in-out;
}
div {
padding-left: 30px;
margin: 10px;
}
.box {
border: 1px solid black;
}
<div class="box">
<div>
<input type="checkbox" name="opt1" id="option1" /> hello
</div>
<div>
<select>
<option>apple</option>
<option>orange</option>
</select>
</div>
<div>
<input type="text" placeholder="enter something" />
</div>
</div>
最佳答案
这不是特定于浏览器的问题,转换缩放属性正在按其应有的方式工作,它将每个嵌套元素缩放到 1.03
在 .box
内元素。
唯一的方法是对子元素使用反向缩放 1 / 1.03 = 0.97
.box:hover {
transform: scale(1.03);
-ms-transform: scale(1.03);
-webkit-transform: scale(1.03);
-webkit-transition: all .01s ease-in-out;
transition: all .01s ease-in-out;
}
div {
padding-left: 30px;
margin: 10px;
}
.box:hover *{
transform: scale(0.97);
-ms-transform: scale(0.97);
-webkit-transform: scale(0.97);
-webkit-transition: all .01s ease-in-out;
transition: all .01s ease-in-out;
}
.box {
border: 1px solid black;
}
<div class="box">
<div>
<input type="checkbox" name="opt1" id="option1" /> hello
</div>
<div>
<select>
<option>apple</option>
<option>orange</option>
</select>
</div>
<div>
<input type="text" placeholder="enter something" />
</div>
</div>
关于html - 如何防止在 safari 中缩放 div 中的复选框和下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44636597/