圖像垂直而不是水平在FF和Chrome中顯示

我希望有人能幫助我！我的圖像在FF和Chrome中垂直顯示而不是水平顯示，但在IE中完美顯示（水平）。我對html有所瞭解，對css屬性知之甚少，所以我有一段時間試圖將這個問題排除出去。經過幾個月的搜索論壇後，我得出的結論是，我遇到的問題與「寬度」屬性，我添加到網站的jQuery手風琴菜單或兩者兼而有之。插入手風琴菜單的html和css後，問題就開始了。由於我使用圖像垂直而不是水平在FF和Chrome中顯示

/****** MULTIPLE IMAGES ****** product detail page */ 
.click {cursor:pointer} 
.imagesmallcontainer { 
    background-color:#ffffff; 
border:2px solid #CCCCCC; 
display:inline-block; 
height:65px; 
margin:4px 4px 2px 0px; 
overflow:hidden; 
width:65px; 
    position: relative; 
} 
.hoverover { 
display:inline-block; 
font-size:11px; 
padding-bottom:2px; 
padding-top:2px; 
    position: relative; 
} 
.notavailable { 
background-color:#ffffff; 
border:1px solid #cccccc; 
color:#666666; 
padding:10px; 
text-align:center; 
}

：你可以在這裏查看示例（與FF或Chrome瀏覽器）：有問題的代碼Spring Creek Rustic Outfitters

HTML部分：代碼

<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td valign="top"> 
    <ss:if test="$product.defaultImage"> 
     <table border="0" cellspacing="0" cellpadding="0" id="imgtable" rules="none"> 
      <tr> 
       <td valign="middle" align="center" width="100%" height="100%" id="divMediumContainer"> 
        <ss:set name="item" value="$product.defaultImage"/> 

        <ss:if test="$item.hasMediumSize()"> 
          <ss:set name="urlMedium" value="$item.medium"/> 
        <ss:else/> 
          <ss:set name="urlMedium" value="$item.small"/> 
        </ss:if> 

        <ss:image id="imgMedium" source="$urlMedium" title="$item.title" class="click"/>   
       </td> 
      </tr> 
     </table> 

     <br /> 

     <ss:foreach item="productMedia" within="$product.images"> 
      <ss:if test="$counter.totalRows > 1"> 
       <ss:set name="item" value="$productMedia.storeMediaItem"/> 
       <ss:if test="$item.hasSmallSize()"> 
        <div style="padding:2px 2px 2px 2px"><div id="$system.concat('divSmallImage_', $counter.currentRow)" class="imagesmallcontainer"> 
         <ss:image id="$system.concat('imgSmall_', $counter.currentRow)" source="$item.getImage('small')" calcoffset="65"/> 
        </div></div> 
        <ss:if test="$counter.isLast"> 
         <div class="hoverover"> 
          <ss:image source="$storeVersion.images['hoverOver.gif']"/> 
         </div> 
        </ss:if> 
       </ss:if> 
      </ss:if> 
     </ss:foreach> 
    <ss:else/> 
     <div class="notavailable"> 
      <div style="padding:50px">Photo Not Available</div> 
     </div> 
    </ss:if> 
</td>

CSS部分來自網絡主機的模板，我不確定是否有人可以幫助...但我認爲這將是值得一試。

由於提前，馬西

來源

2013-04-05 Marcy Norwood

使用Float:left無論是.imagesmallcontainer元素或裏面IMG標籤。它會工作。

來源

2013-04-06 21:05:26

圖像垂直而不是水平在FF和Chrome中顯示

回答

相關問題