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 应用于左侧和顶部属性,然后缩放,从而按缩放系数降低左侧和顶部移动。
首先
CSS 属性的顺序是相关的。
elementA {
propA: valA,
probB: valB
}
elementB {
propB: valB,
probA: valA
}
这两个元素具有相同的 CSS 属性,并且显示相同。
其次
CSS zoom
属性不是标准的,在与定位一起使用时可能存在问题。解决此问题的一种方法是使用 scale()
:
比较缩放与缩放绝对偏置的元素。1
但是,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中是子元素
?
var myFunnyZoomVariable = whatever;
map.css({
'zoom': myFunnyZoomVariable,
'left': map.width()/(2*zoom) - (point[0]/100)*map.width(),
'top': map.height()/(2*zoom) - (point[1]/100)*map.height()
});