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

【问题标题】：Non-webkit browsers, gap between adjacent images that are in a rotated div非 webkit 浏览器，旋转 div 中相邻图像之间的间隙
【发布时间】：2012-11-21 09:27:28
【问题描述】：

我们的目标是旋转一个填充有“tiles”的 div——它们是相邻的图像元素，它们的位置由样式属性设置为 top 和 left。

这在启用 webkit 的浏览器（Chrome/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>

【问题讨论】：

标签： javascript html css cross-browser transform

【解决方案1】：

对于任何想知道的人来说，这似乎是某些浏览器的怪癖。 FireFox 似乎正在解决这个问题： https://bugzilla.mozilla.org/show_bug.cgi?id=504071

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

【讨论】：

看看我的SO Question 并给出我接受的答案。在解决此问题之前，这可能是您的解决方法。附言如果您对自己的答案感到满意，请接受。