Chrome中的樣式問題與datalist

Question

我在Chrome中加載了datalist控件中的產品樣式問題。 儘管FF中的所有內容看起來都不錯，但Chrome給了我很奇怪的風格。 以下是截圖：

FF：http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023

鉻：http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739

下面是HTML標記：

<div class="product-grid"> 
     <asp:DataList ID="dlCatalog" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" 
      RepeatLayout="Table" ItemStyle-CssClass="item-box"> 
      <ItemTemplate> 
       <nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>' 
        runat="server" /> 
      </ItemTemplate> 
     </asp:DataList> 
    </div> 

這裏是CSS：

.product-grid { margin-bottom: 15px; width: 586px; text-align: center; margin-left: -10px; } 
.product-grid .item-box { text-align: center; vertical-align: top; padding: 10px 11px 60px 11px; } 
.product-grid .product-item { text-align: center; margin: 10px 5px 10px 5px; width: 250px; background: url('images/prod_grid_box_bg.gif') no-repeat 0 100%; } 
.product-grid .product-item .product-title { font-weight: bold; font-size: 12px; background: url('images/deal_box_hl.gif') no-repeat 0 0; padding-left: 10px; } 
.product-grid .product-item .product-title a { background: url('images/deal_box_hr.gif') no-repeat 100% 0; display: block; height: 2em; line-height: 1.3em; overflow: hidden hidden; padding: 4px 10px 8px 0px; } 
.product-grid .product-item .picture { text-align: center; margin-top: 10px; } 
.product-grid .product-item .description { margin: 5px 5px 0 5px; text-align: center; padding: 10px 5px 10px 5px; border-top: solid 1px #e3e3e3; color: #555; height: 50px; } 
.product-grid .product-item .add-info { vertical-align: bottom; text-align: right; width: 250px; height: 85px; position: relative; } 
.product-grid .product-item .add-info .prices { text-align: right; vertical-align: middle; position: absolute; bottom: 15px; right: 10px; } 
.product-grid .product-item .add-info .buttons { vertical-align: middle; position: absolute; bottom: 15px; left: 10px; text-align: left; } 
.product-grid .product-item .add-info .prices .productPrice { color: green; } 
.product-grid .product-item .add-info .prices .oldproductPrice { color: Red; text-decoration: line-through; } 

產品BOX CODE ADDED：

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control" 
    CodeBehind="ProductBox1.ascx.cs" %> 
<%@ Register TagPrefix="nopCommerce" TagName="ProductPrice2" Src="~/Modules/ProductPrice2.ascx" %> 

<script type="text/javascript" language="javascript" src="../Scripts/jquery.expander.js"></script> 
<script type="text/javascript"> 
    // you can override default options globally, so they apply to every .expander() call 
    //$.expander.defaults.slicePoint = 50; 

    $(document).ready(function() { 
     // simple example, using all default options unless overridden globally 
     //$('div.expandable h3').expander(); 

     // *** OR *** 

     // override default options (also overrides global overrides) 
     $('div.expandable h3').expander({ 
      slicePoint: 50, // default is 100 
      expandPrefix: '.....', // default is '... ' 
      expandText: '>>', // default is 'read more' 
      collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing 
      userCollapseText: '<<' // default is 'read less' 
     }); 

    }); 
</script> 
<%--<div class="product-item"> 
    <h2 class="product-title"> 
    <asp:HyperLink ID="hlProduct" runat="server" /> 
    </h2> 
    <div class="picture"> 
    <asp:HyperLink ID="hlImageLink" runat="server" /> 
    </div> 
    <div class="description"> 
    <asp:Literal runat="server" ID="lShortDescription"></asp:Literal> 
    </div> 
    <div class="add-info"> 
    <div class="prices"> 
     <nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' /> 
    </div> 
    <div class="buttons"> 
     <asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click" 
     Text="<% $NopResources:Products.ProductDetails %>" ValidationGroup="ProductDetails" 
     CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridproductdetailbutton" /><br /> 
     <asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>" 
     ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductId") %>' CssClass="productgridaddtocartbutton" /> 
    </div> 
    </div> 
</div>--%> 
<div class="pblock"> 

    <div class="borderProd"> 
     <div class="expandable"> 
      <h3> 
       <asp:HyperLink ID="hlProduct" runat="server" /> 
      </h3> 
     </div> 

     <asp:Literal runat="server" ID="lShortDescription" Visible="false"></asp:Literal> 
    </div> 

    <div class="img"> 
    <a id="hlImageLink" runat="server"> 
     <img id="hlImage" runat="server" style="max-width:170px;max-height:120px"/> 
    </a> 
    <div class="body"> 

    </div> 
    <div class="body"> 
    <nopCommerce:ProductPrice2 ID="ctrlProductPrice" runat="server" ProductId='<%#Eval("ProductId") %>' /> 
    </div> 
    <asp:Label ID="labUniversal" runat="server" ForeColor="Blue" Text=""></asp:Label> 
</div> 
</div> 

Answer 1

我通過設置項目框的高度爲275px來解決了這個問題。 感謝大家的幫助。