1

下面是用于测试的html代码。在其他浏览器中，所有 3-div 都按比例缩小 0.5。但是在 IE（包括 IE9）中，绝对定位的 div（第二深度 div）和它的子 div（第三深度 div）没有正确缩小。

如何正确为所有 div 应用缩放样式？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="zoom:0.5">
<div style="width:400px;height:400px;background:red">
<div style="position:absolute;width:200px;height:200px;background:black">
<div style="width:100px;height:100px;background:blue"></div>
</div>
</div>
</body>
</html>
4

2 回答 2

1

zoom是一个非标准的 IE 属性。其他一些浏览器（如 Firefox）会简单地忽略它

缩放元素的符合标准的方法是使用scale() transform-function。

body {
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    transform: scale(.5);
}

比较http://jsfiddle.net/tqMsv/（缩放）和http://jsfiddle.net/tqMsv/1/（缩放）

于 2013-06-24T08:27:39.193 回答
0

将父元素样式设置为“位置：相对”。现在缩放的父元素内的所有元素也应该被缩放。

于 2017-06-06T18:29:10.377 回答