Chrome中的CSS图像平铺边框溢出

Question

尝试通过将一系列较小的绝对定位图像拼贴在一起来构建大型图像查看器。这在大多数浏览器中都可以找到，其中每个平铺图像都与周围的图像完美对齐。但是，在某些浏览器上，尤其是在高 DPI 笔记本电脑（如 Google Chrome 上的 Macbook Pro）上查看此内容时，在放大和缩小页面时，某些图块上似乎有边框溢出。不知道为什么会这样。我不是 CSS 专家，但如果有人能指出我缺少哪些 CSS 规则以使其在所有浏览器上看起来完美无缺，我将不胜感激。

JSFiddle 链接：https://jsfiddle.net/w5kfseno/

尝试在缩小 67% 时在 Google Chrome 中查看链接。根本不应该有任何蓝线。

如果链接失效，下面是 HTML 和 CSS

<div class="container">
<div class="tile img"         
    style="left: 0px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"        
    style="left: 512px; top: 0px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 0px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 512px; top: 256px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 0px; top: 512px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 256px; top: 512px; width: 256px; height: 256px;"></div>
<div class="tile img"         
    style="left: 512px; top: 512px; width: 256px; height: 256px;"></div>

.container{
width: 768px; height:768px;position:relative;
}

.img{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAJ7SURBVHhe7ccxDQAwEAOx50+63UPhLHnxvYOuPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9pCyh5Q9pOwhZQ8pe0jZQ8oeUvaQsoeUPaTsIWUPKXtI2UPKHlL2kLKHlD2k7CFlDyl7SNlDyh5S9hBy9wFZTA7yASofcgAAAABJRU5ErkJggg==');
}

.container .tile{
background-color:#33F;
display: inline-block;
margin: 0;
vertical-align: top;
position: absolute;
background-repeat: no-repeat;
pointer-events: none!important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
border: none;   
border-style:none;
border-collapse:collapse;
}

Answer 1

我不完全理解你的要求，但是 - 我会接近你的目标（更清洁），如下所示： ;)

Simple JSfiddle Demo。

---

#container {
width: 515px;
height: 75px;
overflow: hidden;
border: 3px double #000;
white-space: nowrap;
}

#container img {display: inline-block;}

img { max-width: 100px; }

<div id="container">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
    <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg">
</div>