1

我希望有一个人可以帮助我！我的图像在 FF 和 Chrome 中垂直显示而不是水平显示，但在 IE 中完美（水平）显示。我对html有点了解，对css属性知之甚少，所以我正忙着解决这个问题。经过几个月的论坛搜索，我得出的结论是，我遇到的问题与“宽度”属性、我添加到网站的 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;
}

由于我使用的是来自网络主机的模板，我不确定是否有人可以提供帮助……但我认为值得一试。

提前致谢， 玛西

4

1 回答 1

0

用于Float:left.imagesmallcontainer元素或其中的img标签。它会起作用的。

于 2013-04-06T21:05:26.060 回答