css - 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” 以使其工作。