图像在FF和Chrome中垂直显示，而不是水平显示

Question

我希望有一个人可以帮助我！ 我的图像在FF和Chrome中显示为垂直而不是水平，但是在IE中显示为完美（水平）。 我对html有所了解，而对CSS属性的了解却很少，所以我有一段时间试图解决这个问题。 经过几个月的论坛搜索，我得出的结论是，我遇到的问题与“ width”属性，我添加到网站的jquery手风琴菜单或两者有关。 在插入手风琴菜单的html和css之后，问题开始了。 您可以在此处查看示例（使用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部分代码：

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

由于我使用的是虚拟主机模板，因此我不确定是否有人可以提供帮助...但是我认为值得一试。

预先感谢，马西

Answer 1

对.imagesmallcontainer元素或其中的img标签使用Float:left 。 而且会起作用。