非webkit瀏覽器，在旋轉div中的相鄰圖像之間的差距

目標是旋轉填充了「tiles」的div - 它們是相鄰的圖像元素，其位置設置爲樣式屬性頂部和左側。非webkit瀏覽器，在旋轉div中的相鄰圖像之間的差距

這將按預期在webkit的功能的瀏覽器（鉻/ Safari瀏覽器）： http://jsfiddle.net/Yt99J/52/

<html> 
    <head> 
    <title>Rotating div of adjacent elements</title> 
    </head> 

    <body> 
     <div id="canvas" style="overflow: visible; position: absolute; -webkit-transform: translate3d(0px, 100px, 0px) rotate3d(0, 0, 1, 0deg);"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
     </div> 

     <div id="canvas_rotated" style="overflow: visible; position: absolute; -webkit-transform: translate3d(400px, 50px, 0px) rotate3d(0, 0, 1, 45deg);"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
     </div> 
    </body> 
</html>

然而，對於非WebKit瀏覽器，當圖像被轉動到一個角度，其是不是90度的倍數，瓷磚之間有1像素的空隙。我假設這是由於瀏覽器內部最低級別的舍入錯誤。有沒有什麼辦法可以解決這個問題，除了用它們的大小函數來縮放拼圖以彌補差距（如果可能，我想避免這樣做）。下面是錯誤的一個例子，如在FireFox中實現： http://jsfiddle.net/Yt99J/50/

<html> 
    <head> 
    <title>Rotating div of adjacent elements</title> 
    </head> 

    <body> 
     <div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(0px, 100px) rotate(0deg);"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
     </div> 

     <div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(400px, 50px) rotate(45deg);"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
      <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg"> 
     </div> 
    </body> 
</html>

來源

2012-12-03 WellHydrated

給任何人想知道，看起來這是某些瀏覽器的怪癖。 FireFox似乎正在修復這個問題： https://bugzilla.mozilla.org/show_bug.cgi?id=504071

希望IE和其他瀏覽器效仿。這個問題真的很吸引映射網絡應用程序。

來源

2012-12-06 20:31:46 WellHydrated

看看我的[SO問題]（http://stackoverflow.com/q/10735259/1195891）與我接受的答案。在解決此問題之前，也許這是您的解決方法。附：如果你對自己的答案感到滿意，請接受它。 – arttronics

非webkit瀏覽器，在旋轉div中的相鄰圖像之間的差距

回答

相關問題