Firefox Div問題

我正在嘗試製作一些我在動畫類中做過的作品。我想在每一行放3張圖片，因爲我做了洋蔥皮包裝，在它們上面進行了陰影處理，所以它們都是分隔線。不幸的是，這使得它們全都在頁面上以兩行連接在一起。但我希望它們具有特定的格式，所以我試圖在每組3中包裝一個寬度爲480px的div。在IE中，這種方式效果很好，看起來很完美。但是在Firefox它這樣做Firefox Div問題

http://i44.tinypic.com/1r5hdg.jpg

我想不通爲什麼它是把一個留在第二線對齊，因此搞砸了，其餘的順序。這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ryan Merl's Portfolio</title> 
<style type='text/css'> 
    * { 
     padding: 0px; 
     margin: 0px; 
     font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-size: 11px; 
    } 
    body { 
     background-color:#333333; 
     background-image: url('images/head.png'); 
     background-repeat: repeat-x; 
    } 
    a { 
     color:#333333; 
     text-decoration: none; 
    } 
    a:hover { 
     color:#000000; 
     text-decoration:underline; 
    } 
    div.main { 
     width: 800px; 
     background-color:#FFFFFF; 
     margin-top: 10px; 
     color: #000000; 
     height: 1000px; 
     margin-bottom: 10px; 
    } 
    img.thumb { 

    } 
    .wrap1, .wrap2, .wrap3 { 
     display:inline-table; 
     /* \*/display:block;/**/ 
    } 
    .wrap1 { 
     float:left; 
     background:url('images/shadow.gif') right bottom no-repeat; 
    } 
    .wrap2 { 
     background:url('images/corner_bl.gif') left bottom no-repeat; 
    } 
    .wrap3 { 
     padding:0 4px 4px 0; 
     background:url('images/corner_tr.gif' ) right top no-repeat; 
    } 
</style> 
<link rel="stylesheet" type="text/css" href="doc/css/style.css" /> 
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script> 
<script type="text/javascript" src="src/shadowbox.js"></script> 
<script type="text/javascript" src="glossy.js"></script> 
<script type="text/javascript"> 

Shadowbox.loadSkin('classic', 'src/skin'); 
Shadowbox.loadLanguage('en', 'src/lang'); 
Shadowbox.loadPlayer(['flv', 'html','img', 'swf'], 'src/player'); 

window.onload = function(){ 
    Shadowbox.init(); 
}; 

</script> 
</head> 
<body> 
    <center><div class='main'> 
     <img src='images/theantistudio.png' /><br /><br /> 

     <img src='images/gallery.png' /><br /> 
     <div style='text-align:center;width:480px;'> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_particle_fire.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fire.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_firework.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_firework.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_fountain.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fountain.png' /></a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <br /> 
     <div style='text-align:center;width:480px;'> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_logo.flv' rel='shadowbox'><img class='thumb' src= 'thumbs/thumb_logo.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_rocket_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_rocket.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_solar_system.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_solar_system.png' /></a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <br /> 
     <div style='text-align:center;width:480px;'> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_space_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_space_ship.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_still_life.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_still_life.png' /></a> 
        </div> 
       </div> 
      </div> 
      <div class="wrap1"> 
       <div class="wrap2"> 
        <div class="wrap3"> 
         <a href='video/rmerl_walkthrough.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_walkthrough.png' /></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div></center> 
</body> 
</html>

來源

2009-02-13 The.Anti.9

會很好，如果您將圖像縮小一點，如果您要鏈接它內聯。 – U62 2009-02-13 13:56:39

請記住，我們沒有您的圖片......所以要我們看看這個，您必須在圖片標籤上添加寬度和高度屬性。 – stusmith 2009-02-13 14:01:58