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;}