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 即可。的＆LT; -

＆＃13;
＆＃13;
#container { width: 515px; height: 75px; overflow: hidden; border: 3px double #000; white-space: nowrap; } #container img {display: inline-block;} img { max-width: 100px; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Chrome中的CSS图像平铺边框排空

1 个答案: