Question

我通过使用几何公式相应地为活动和非活动计时器状态放置60个div来制作一个简单的圆形计时器：

x = x0 + r * Cos(theta * PI / 180);
y = y0 + r * Sin(theta * PI / 180);

但是浏览器似乎在它们之间放置了错误的空格，手动更改公式值并没有帮助它所以我决定接受这种行为。

直到我在IE中检查它，这恰好以不同的方式解析这些坐标，实际上，它是唯一正确放置元素的浏览器，形成一个完美的圆形圆圈，因此将这些元素扩展到父元素的维度之外。

我的第一个想法是关于浏览器解析器值四舍五入的差异。也就是说，IE似乎在小数点后用两位数的精度舍入值，而其他值更精确。不确定他们如何渲染这些价值观，所以我无法确定这些差异。

我实际上需要我的计时器看起来像IE绘制它。所以，我很感激你对这个话题的看法。

元素的放置如下：

or(var z = 0; z < items; z++) {
        segment_inactive = $("<div class='segment_inactive'></div>"),
            segment_active = $("<div class='segment_active'></div>");

        var x = 80  + 80 * Math.cos(2 * Math.PI * z / items);
        var y = 80  + 80 * Math.sin(2 * Math.PI * z / items);

        d += 6;

        $("#timer").append(segment_inactive, segment_active);

        segment_inactive.css({
            left:x +"px",
            top:+ y +"px",
            transform: "rotate("+d+"deg)",
            display: "block"
        });

        segment_active.css({
            left:x +"px",
            top:+ y +"px",
            transform: "rotate("+d+"deg)",
            display: "none"
        });
    }

和它只显示/隐藏切换。

您可以在下面的jsfiddle链接中查看此计时器。特别是在不同的浏览器和IE中查看它。

http://jsfiddle.net/69cAa/4/

Answer 1

所以我做了我的小研究，使用不同的值来进行转换/定位，分辨率/缩放级别，并且我注意到了一些事情：

缩放页面输入/输出实际上调整计时器，使其在高变焦系数上正确显示。

确实，每个浏览器都可以随心所欲地计算出值。问题似乎是浏览器处理子像素并将浮点数值舍入为整数1，这在高dpi时不是问题，但在低dpi时缺少像素容量。

所以，我猜这不是值舍入的不一致，而是屏幕上缺少像素容量，解析器可以用来在页面上正确调整元素。

IE处理缩放页面的方式与其他页面不同（因为他总是按照自己的方式完成所有操作）。 IE中的缩放行为实际上类似于其他浏览器中的“transform：scale（）”。也就是说，它不会触发页面重排。

但问题是IE也能在高分辨率下正确显示计时器。

所以我假设ie以某种方式呈现具有适当大小/定位的计时器，并且不会在不同分辨率下重排它。

奇怪的是，他们说浏览器解析器必须是整数才能调整他的大小/位置，但是将元素位置从1px更改为2 px在值1.0 1.3 1.6 1.7 1.9和2.0

为了在视觉上移动元素，不是必须达到的常数值，但总是有两个以上的断点。

仍在寻找答案。非常感谢您对主题的看法。

浏览器元素定位差异

1 个答案: