html - Safari 宽度百分比过渡错误

Question

我遇到了麻烦。我需要你的帮助。这让我发疯。

我通过将图像宽度设置为 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=""/>
             &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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=""/>
           &#160;</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원&lt;/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; }

知道是什么导致了这个问题吗？有什么解决办法吗？

感谢我能得到的任何帮助。提前致谢。