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 样式借来的小提琴不适用于定位的绝对 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()
});