我遇到了麻烦。我需要你的帮助。这让我发疯。
我通过将图像宽度设置为 100% 并将边框设置为悬停时的不同宽度来创建缩放效果。该效果似乎在 Chrome firefox 上运行良好,但它不适用于 safari。不完全确定问题出在哪里。看起来图像没有正确缩放。悬停时,一行中的最后一项也会推动下一行。再次仅在 Safari 中。
http://www.innohome.kr/product/list.html?cate_no=31
这是HTML
<div class="xans-element- xans-product xans-product-listnormal">
<ul class="prdList">
<li id="anchorBoxId_5" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_5" href="http://innohome.kr/product/detail.html?product_no=5&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_5.png" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=5&cate_no=12&display_group=1" class="name">샘플상품 5</a>
<div class="icon"> <img src="http://img.echosting.cafe24.com/design/common/icon_rec.gif" class="icon_img" alt="추천" /> <img src="http://img.echosting.cafe24.com/design/common/icon_new_p.gif" class="icon_img" alt="신상품" /> </div>
</div>
<strong class="price">
<span class="custom ">25,000원</span>25,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_32" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_32" href="http://innohome.kr/product/detail.html?product_no=32&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_32.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=32&cate_no=12&display_group=1" class="name">chair 5</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">30,000원</span>30,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_31" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_31" href="http://innohome.kr/product/detail.html?product_no=31&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_31.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=31&cate_no=12&display_group=1" class="name">chair 4</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">30,000원</span>30,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_30" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_30" href="http://innohome.kr/product/detail.html?product_no=30&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_30.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=30&cate_no=12&display_group=1" class="name">chair3</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">30,000원</span>30,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_29" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_29" href="http://innohome.kr/product/detail.html?product_no=29&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_29.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=29&cate_no=12&display_group=1" class="name">chair 2</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">30,000원</span>30,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_28" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_28" href="http://innohome.kr/product/detail.html?product_no=28&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_28.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=28&cate_no=12&display_group=1" class="name">table 6</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">5,000원</span>5,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_27" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_27" href="http://innohome.kr/product/detail.html?product_no=27&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_27.JPG" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=27&cate_no=12&display_group=1" class="name">table 5</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">5,000원</span>5,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_26" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_26" href="http://innohome.kr/product/detail.html?product_no=26&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_26.JPG" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=26&cate_no=12&display_group=1" class="name">table 4</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">5,000원</span>5,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
<li id="anchorBoxId_25" class="xans-record-">
<div class="prdList1">
<a name="anchorBoxName_25" href="http://innohome.kr/product/detail.html?product_no=25&cate_no=12&display_group=1" class="prdImg"><img src="http://www.innohome.kr/web/product/small/innofeel60_25.jpg" alt=""/>
 </a>
<div class="caption">
<div class="caption_top">
<a href="http://innohome.kr/product/detail.html?product_no=25&cate_no=12&display_group=1" class="name">table 3</a>
<div class="icon"> </div>
</div>
<strong class="price">
<span class="custom ">5,000원</span>5,000원 </strong>
<span class="summary_desc"></span>
<span class="displaynone date"></span>
</div>
</div>
</li>
</ul>
</div>
这是CSS
.xans-product-listnormal {
border: 1px solid #ebebe8;
position: relative;
margin-bottom: 0px;}
.xans-product-listnormal h2{}
.xans-product-listnormal ul {
clear:both;
zoom:1;
margin:0px auto;
text-align:center}
.xans-product-listnormal ul:after {
content:"";
display:block;
clear:both; }
.xans-product-listnormal ul li {
float:left;
padding:0 0 0px 0;
position:relative;
width:25%;}
.xans-product-listnormal ul li .prdList1 {
vertical-align:top;
padding:0px 0 0 0px;
text-align:center;
background:#fff;
border:20px solid #fff;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.xans-product-listnormal ul li .prdList1:hover {
border:10px solid #ebebe8;}
.xans-product-listnormal ul .prdImg {
display:block;
text-align:center;
width:100%}
.xans-product-listnormal ul .prdImg>img {width:100%;}
.xans-product-listnormal ul .caption{
width:85%;
margin: 0 auto;}
.xans-product-listnormal ul .name {
margin:0px auto;
padding:0px 5px 5px 5px;
display:block;
text-align:left;
font:11px/17px 돋움;
color:#5A5A5A;
letter-spacing: -1px;
border-bottom:1px solid #dbdbdb;}
.xans-product-listnormal ul li .prdList1 span.summary_desc {
display:block;
padding:0px 5px 0px 5px;
margin:0px auto;
text-align:left;
font:11px/14px 돋움;
color:#9C9C9C;
padding:10px 0px 0 0px;
letter-spacing: -1px;}
.xans-product-listnormal ul .icon {
padding:0px 10px;
display:block;
vertical-align:middle;
text-align:right;
height:15px}
.xans-product-listnormal ul .icon img {
vertical-align:middle;}
.xans-product-listnormal ul .price { display:block;
text-align:left;
font:bold 11px/15px 맑은 고딕;
color:#ff825e;
padding:5px 10px 10px; }
.xans-product-listnormal ul .price span.custom {
text-align:right;
text-decoration:line-through;
font:italic 11px/15px 맑은 고딕;
color:#888;
padding:0 5px 0 0px ;}
.xans-product-listnormal .prdList ul.prdColor { margin:5px 0; }
.xans-product-listnormal .prdList ul.prdColor li { width:8px;
height:8px;
padding:0;
margin:0 2px 2px 0;
border:1px solid #969696; }
.xans-product-listnormal .prdList ul.prdColor li span {
display:block; height:100%; }
.xans-product-listnormal ul .xans-product-listitem { min-width:0; }
.xans-product-listnormal ul .xans-product-listitem { margin:0; }
.xans-product-listnormal ul .xans-product-listitem li {
overflow:hidden;
float:none;
width:auto;
padding:0;
text-align:center; }
.xans-product-listnormal ul .xans-product-listitem li .title { font-weight:normal; }
知道是什么导致了这个问题吗?有什么解决办法吗?
感谢我能得到的任何帮助。提前致谢。