Web 浏览器正在按字母顺序编译 css 元素

Web Browser is compiling css elements in alphabetical order

本文关键字：顺序 编译 css 元素 浏览器 Web      更新时间：2023-09-26
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()
});
相关文章：