0

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

では、どうすればこれをクロスブラウザで機能させることができますか?

4

2 に答える 2

0

ここに画像の説明を入力してください

 .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"を追加しただけで、機能するようになりました。

于 2013-03-03T11:41:53.150 に答える
0

を使用してdisplay:inline-blockいるため、要素間に空白がないことを確認してください。またinline-block、要素は onselfvertical-alignおよびonparent の影響を受けtext-alignます。

空白を削除したくない場合はfont-size、レイアウトに影響を与えるものです。

空白を削除しても折り返し動作が残る場合の回避策は、:afterスペースを含む要素を追加することです。

.Image-collector:after{ content:' '; font-size:0;}
于 2013-03-03T11:28:07.063 に答える