1

以下は、テスト用の html コードです。他のブラウザでは、すべての 3-div が 0.5 ずつ縮小されます。ただし、IE(IE9含む)では、絶対配置のdiv(深さ2のdiv)とその子のdiv(深さ3の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

親要素のスタイルを「position:relative」に設定します。これで、ズームされた親要素内のすべての要素もズームされます。

于 2017-06-06T18:29:10.377 に答える