0

我通过使用几何公式相应地为活动和非活动计时器状态放置 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/

4

1 回答 1

0

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

  • 放大/缩小页面实际上调整了计时器，使其在高缩放系数下正确显示。

确实，每个浏览器都会随心所欲地对值进行四舍五入。问题似乎在于浏览器处理子像素并将浮点数值舍入为整数 1，这在高 dpi 上不是问题，但在低 dpi 上缺乏像素容量。

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

  • IE 处理缩放页面的方式与其他方式不同（因为他总是以自己的方式做所有事情）。IE 中的缩放行为实际上类似于其他浏览器中的“transform: scale()”。也就是说，它不会触发页面重排。

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

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

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

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

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

于 2013-10-25T16:49:03.430 回答