0

できますか - クロスブラウザ (IE9、Mozilla、Chrome、Opera) ?

このスニペット.boxでは、ボーダーはプロパティの影響を受けzoomます。これは回避できますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box {
     zoom: 3;
     -moz-transform: scale(3);  /* FF fix */
     border: 1px dotted black;
     padding:10px;
}
</style>
</head>
<body>
    <div class="box">content</div>
</body>
</html>
4

1 に答える 1

0

ここで何を期待しているのかよくわかりません。zoomプロパティを任意の要素に適用すると、そのすべての測定値が によって変換され1/xます。あなたの例を離れて、これを行う最善の方法は、意図した測定値をズームの値で割ることです。あなたの例では、パディングを10px（またはそのあたり）に保ちたい場合は、padding:3px代わりに使用します。

ただし、問題はborderプロパティにあり、具体的には値として設定さ1pxれているため、これを値で割ることはできませんzoom。代わりに、HTML をラップする必要があります。

<div class="border">
    <div class="box"></div>
</div>

境界線のスタイリングを から.boxに移動します.border

働くフィドル

于 2013-11-08T15:01:18.070 に答える