Javascript 非webkit浏览器，旋转div中相邻图像之间的间隙_Javascript_Html_Css_Cross Browser_Transform

Javascript 非webkit浏览器，旋转div中相邻图像之间的间隙

javascript html css

Javascript 非webkit浏览器，旋转div中相邻图像之间的间隙,javascript,html,css,cross-browser,transform,Javascript,Html,Css,Cross Browser,Transform,目标是旋转一个填充了“平铺”的div，平铺是相邻的图像元素，其位置设置为“样式属性”的顶部和左侧这在支持webkit的浏览器（Chrome/Safari）中正常工作：相邻元素的旋转div 但是，对于非webkit浏览器，当图像旋转到不是90度倍数的角度时，平铺之间有1个像素的间隙。我假设这是由于浏览器中最低级别的舍入错误造成的。除了按瓷砖大小的函数缩放瓷砖以弥补间隙（如果可能的话，我希望避免这样做）之外，还有什么方法可以解决这个问题吗。下面是一个在FireFox中实现的bug示例：

目标是旋转一个填充了“平铺”的div，平铺是相邻的图像元素，其位置设置为“样式属性”的顶部和左侧

这在支持webkit的浏览器（Chrome/Safari）中正常工作：


相邻元素的旋转div

但是，对于非webkit浏览器，当图像旋转到不是90度倍数的角度时，平铺之间有1个像素的间隙。我假设这是由于浏览器中最低级别的舍入错误造成的。除了按瓷砖大小的函数缩放瓷砖以弥补间隙（如果可能的话，我希望避免这样做）之外，还有什么方法可以解决这个问题吗。下面是一个在FireFox中实现的bug示例：


相邻元素的旋转div

对于任何想知道的人来说，这似乎是某些浏览器的一个怪癖。FireFox似乎正在解决这个问题：

希望IE和其他浏览器也能效仿。这个问题对于映射web应用程序来说真的很糟糕。

看看我的答案，我接受了。在这个问题解决之前，这可能是您的一个解决方法。如果你对自己的答案感到满意，请接受。

<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>

<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>