Question

下面是用于测试的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>

Answer 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/（比例）进行比较

Answer 2

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

缩放css样式不适用于定位的绝对div元素，它是IE中的子元素

2 个答案: