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

【问题标题】：zoom css style is not applied to positioned absolute div element and it's children in IE缩放 css 样式不适用于定位的绝对 div 元素，它是 IE 中的子元素
【发布时间】：2013-06-24 07:50:46
【问题描述】：

以下是用于测试的 html 代码。在其他浏览器中，所有 3-div 都按比例缩小 0.5。但是在 IE（包括 IE9）中，绝对定位的 div(second-depth div) 和它的子 div(third-depth 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>

【问题讨论】：

（这对于手头的问题并不重要，但对于您自己对材料的理解）这是 HTML 还是 XHTML？ <html> 标签会让我们相信它是 XHTML，而 <meta> 元素会以两种不同的方式尖叫。

标签： css internet-explorer zooming

【解决方案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/（缩放）

【讨论】：

谢谢！！你的提示很有帮助！有关更多信息，我研究并找到了此链接stackoverflow.com/questions/3055383/…
为绝对定位的 div 和 progid:DXImageTransform.Microsoft.Matrix 属性添加了 z-index 为旧版 IE 工作正常！'

【解决方案2】：

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

【讨论】：