problème de style dans Chrome avec datalist

Question

Je rencontre un problème de style avec les produits chargés dans le contrôle de données dans Chrome. Alors que tout semble bien dans FF, Chrome me donne un style bizarre. Voici les captures d'écran:

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

Chrome: http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.png?1341955739

Voici le balisage 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> 

Voici le 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; } 

DU PRODUIT CODE DE BOÎTE AJOUTÉ:

<%@ 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

J'ai résolu le problème en réglant la hauteur de la boîte d'éléments sur 275px. Merci à tous pour votre aide.