瀏覽器元素的定位差異

我已經通過相應地使用幾何公式將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/

來源

2013-10-23 Pro7ect

從'.segment ...'類中移除'-webkit-transform-origin：top;'，並且該圓會在[出現]（http：// jsfiddle。 net/mSxLe /）在IE和FF中。 – Teemu

它確實增長，但這畢竟不是定位不好的原因。你可以知道元素之間的空間對於所有的瀏覽器來說仍然是不同的，但是IE可能並不完美，但是比其他的好得多。 – Pro7ect

所以我做我的小研究與不同的值四捨五入進行改造/定位，分辨率/縮放級別玩，我注意到幾件事情：

縮放頁面/實際出發調整定時器使其以高變焦倍數正確顯示。

這是事實，因爲他喜歡每一個瀏覽器四捨五入值。問題出現在瀏覽器處理子像素並將浮點數值舍入爲整數，這在高dpi上不成問題，但在低DPI時缺少像素容量。

所以，我想這不是價值四捨五入的不一致，但在屏幕上缺乏像素容量分析器可以使用適當的調整要素頁面上。

IE處理縮放頁面的方式不同於其他方式（因爲他總是以他自己的方式做所有事情）。 IE中的縮放行爲實際上與其他瀏覽器中的「transform：scale（）」類似。也就是說，它不會觸發頁面重排。

但事實是，IE瀏覽器顯示計時器正確高分辨率爲好。

所以我認爲，即以某種方式呈現適當的大小/定位計時器，並不會在不同的分辨率上重新使用它。

奇怪的是，他們說，瀏覽器解析器四捨五入，以調整自己的尺寸/位置號，但改變元素位置從1px的2 PX不同會出現在值1.0 1.3 1.6 1.7 1.9和2。0

它不是一個常量值，必須達到以視覺移動元素，但總是有兩個以上的突破點。

仍在尋找答案。真的很感激你對主題的想法。

來源

2013-10-25 16:49:03 Pro7ect

瀏覽器元素的定位差異

回答

相關問題