问题:

Below is html code for testing. In other browser, all 3-divs are scale down by 0.5. However in IE(including IE9), absolutely positioned div(second-depth div) and it's child div(third-depth div) is not scale down properly.

How do I apply zoom style for all divs properly?

<!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>

回答1:

zoom is a non-standard IE property. Some other browsers (like firefox) will simply ignore it

The standards-compliant way of scaling an element is by using the scale() transform-function.

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

Compare http://jsfiddle.net/tqMsv/ (zoom) with http://jsfiddle.net/tqMsv/1/ (scale)

回答2:

Set the parent elements style to "position:relative". Now all elements inside the zoomed parent element should be zoomed as well.

zoom css style is not applied to positioned absolu

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮