javascript - Web ブラウザが css 要素をアルファベット順にコンパイルしています

Question

map.css({
    'zoom': zoom, 
    'left': map.width()/(2*zoom) - (point[0]/100)*map.width(),
    'top': map.height()/(2*zoom) - (point[1]/100)*map.height()

Chrome はマップをズームしてから左と上のプロパティを適用し、IE は左と上のプロパティに適用してからズームし、左と上の動きをズーム倍率で下げるように見えます。

Answer 1

まずは

CSS プロパティの順序は関係ありません。

elementA {
    propA: valA,
    probB: valB
}
elementB {
    propB: valB,
    probA: valA
}

どちらの要素も同じ CSS プロパティを持ち、同じように表示されます。

第二に

CSSzoomプロパティは標準ではないため、配置で使用すると問題が発生する可能性があります。この問題を克服する方法は、次を使用することですscale()。

絶対配置要素のズームとスケーリングを比較します。¹

scale()ただし、ブラウザのプレフィックスが必要です。

.zoomed-element {
    -webkit-transform: scale(.5);
       -moz-transform: scale(.5);
        -ms-transform: scale(.5); // IE 9
            transform: scale(.5);
}

IE との互換性がより高い他の方法は、絶対配置コンテナーを使用し、ズームを子コンテナーに適用することです。

<div style="position: absolute; top: 10px; left: 10px;">
    <div style="width: 100px; height: 100px; zoom: 2; background-color: red;">
</div>

---

脚注

_{1: ズーム css スタイルから借用した Fiddles は、配置された絶対 div 要素には適用されず、IE の子要素です}

Answer 2

どのようにそのことについて？

var myFunnyZoomVariable = なんでも;

map.css({
    'zoom': myFunnyZoomVariable,
    'left': map.width()/(2*zoom) - (point[0]/100)*map.width(),
    'top': map.height()/(2*zoom) - (point[1]/100)*map.height()
});