非Webkit浏览器，旋转div中相邻图像之间的间隙
[英]Non-webkit browsers, gap between adjacent images that are in a rotated div
问题描述
The goal is to rotate a div which is populated with "tiles" - which are adjacent image elements, with their locations set with the style properties top and left. 
目标是旋转一个由“平铺”填充的div，这些平铺是相邻的图像元素，其位置设置为样式属性的顶部和左侧。
This works as expected in webkit enabled browsers (Chrome/Safari): http://jsfiddle.net/Yt99J/52/ 在启用了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>
However, for non webkit browsers, when an image is rotated to an angle which is not a multiple of 90 degrees, there is a 1 pixel gap between tiles. 但是，对于非Webkit浏览器，当将图像旋转到不是90度倍数的角度时，图块之间会存在1个像素的间隙。 I'm assuming this is due to some rounding error at the lowest level inside the browser. 我假设这是由于浏览器内部最低级别的舍入错误所致。 Is there any way to work around this problem, other than scaling the tiles by a function of their size to make up the gap (I would like to avoid doing this if possible). 除了通过缩小瓷砖的大小来补偿空隙（是否可能这样做）以外，是否有其他方法可以解决此问题。 Here is an example of the bug, as implemented in FireFox: http://jsfiddle.net/Yt99J/50/ 这是在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>
1 个解决方案
解决方案1
1 已采纳 2012-12-06 20:31:46
To anyone that was wondering, looks like this is a quirk of some browsers. 对于任何想知道的人，看起来这都是某些浏览器的怪癖。 FireFox seem to be in the process of fixing this: https://bugzilla.mozilla.org/show_bug.cgi?id=504071 FireFox似乎正在解决此问题： https : //bugzilla.mozilla.org/show_bug.cgi?id=504071
Hopefully IE and other browsers follow suit. 希望IE和其他浏览器也能效仿。 This issue really sucks for mapping web apps. 这个问题对于映射Web应用程序确实很糟糕。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.