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

.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”来使其工作。

Answer 2

由于您使用的是display:inline-block，请确保您的元素之间没有任何空白。另外inline-block元素受自身上的vertical-align和父母上的text-align影响。如果你不想删除空格font-size是会影响布局的东西。

一种removeing白色的空间，仍然有一个包裹行为的解决方法是用一个空间它添加:after元素：

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