Css图像拼图 - 跨浏览器合规性

Question

我正在使用css进行图像拼图，我遇到了浏览器问题。 图像如下所示：

我的css代码是这样的：

     .Image-collector{position:relative;width:204px;height:204px;margin:0px;padding:0px;
      border-radius:0px;border:0;display:inline-block;}  
     .Image-collector img{position:relative;margin:-2px -4px 0px 0px;
      padding:0px; display:inline- block;border-radius:0px;border:0;horizontal-align:none;}  

     .Image-collector1{position:relative;width:204px;height:204px;margin:0px;padding:0px;
      border-radius:0px;border:0;display:inline-block;}  
     .Image-collector1 img{position:relative;margin:-2px -2.5px 0px 0px;
      padding:0px;display:inline-block;border-radius:0px;border:0;horizontal-align:none;}

     .Image-collector2{position:relative;width:204px;height:204px;margin:0px;padding:0px;
      border-radius:0px;border:0;display:inline-block;}  
     .Image-collector2 img{position:relative;margin:-1px -2px 0px 0px;
      padding:0px;display:inline-block;border-radius:0px;border:0;horizontal-align:none;}  

那么如何通过浏览器实现这项功能呢？

Answer 1

由于您使用的是display:inline-block，因此请确保您的元素之间没有任何空格。另外，inline-block元素会受到自我vertical-align和父级text-align的影响。

如果您不想删除空格，font-size会影响布局。

删除空格并仍然具有换行符的解决方法是添加一个带有空格的:after元素：

.Image-collector:after{ content:' '; font-size:0;}

Answer 2

 .Image-collector{position:relative;width:204px;height:204px;margin:0px;padding:0px;
  border-radius:0px;border:0;display:inline-block;}  
 .Image-collector img{position:relative;margin:1px 2px 0px 0px;
  padding:0px; display:inline- block;border-radius:0px;border:0;
  horizontal-align:none;float:left;}  

 .Image-collector1{position:relative;width:204px;height:204px;margin:0px;padding:0px;
  border-radius:0px;border:0;display:inline-block;}  
 .Image-collector1 img{position:relative;margin:1px 1px 0px 0px;
  padding:0px;display:inline-block;border-radius:0px;border:0;
  horizontal-align:none;float:left;}

 .Image-collector2{position:relative;width:204px;height:204px;margin:0px;padding:0px;
  border-radius:0px;border:0;display:inline-block;}  
 .Image-collector2 img{position:relative;margin:0px 0px 0px 0px;
  padding:0px;display:inline-block;border-radius:0px;border:0;
  horizontal-align:none;float:left;} 

最后一张图片不需要保证金损坏，就像我开始时一样。我只在代码中添加了“float：left”以使其正常工作。