造型问题，在Chrome与DataList控件 [英] styling issue in Chrome with datalist

查看：181
本文介绍了造型问题，在Chrome与DataList控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有在Chrome DataList控件加载产品造型问题。
尽管一切看起来在FF OK，铬给了我怪异的造型。
以下是截图：

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

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

下面是HTML标记：

 ＆LT; D​​IV CLASS =产品网＆GT;
        ＆LT; ASP：DataList控件ID =dlCatalog=服务器RepeatColumns =2RepeatDirection =水平
            RepeatLayout =表ItemStyle-的CssClass =项盒＆GT;
            ＆LT;＆ItemTemplate中GT;
                ＆LT; nopCommerce：ProductBox1 ID =ctrlProductBox产品='＆LT;％＃的Container.DataItem％GT;'
                    =服务器/＆GT;
            ＆LT; / ItemTemplate中＆GT;
        ＆LT; / ASP：DataList控件＆GT;
    ＆LT; / DIV＆GT;

下面是CSS：

 。产品网{保证金底：15px的;宽度：586px;文本对齐：中心;保证金左：-10px; }
。产品网.item盒{文本对齐：中心;垂直对齐：首位;填充：10px的11像素60像素11像素; }
。产品网。产品项{文本对齐：中心;保证金：10px的为5px 10px的为5px;宽度：250像素;背景：网址（图像/ prod_grid_box_bg.gif'）不重复0 100％; }
。产品网。产品项目。产品标题{字体重量：大胆的;字体大小：12像素;背景：网址（图像/ deal_box_hl.gif'）不重复0 0;填充左：10px的; }
。产品网。产品项目。产品所有权{背景：网址（图像/ deal_box_hr.gif'）不重复100％，0;显示：块;高度：2em的;行高度：1.3em;溢出：隐藏隐藏的;填充：4PX 10px的加上了8px 0像素; }
。产品网。产品项.picture {文本对齐：中心;的margin-top：10px的; }
。产品网。产品项目.DESCRIPTION {保证金：5像素为5px 0为5px;文本对齐：中心;填充：10px的为5px 10px的为5px;边框顶部：固体1px的＃e3e3e3;颜色：＃555;高度：50像素; }
。产品网。产品项目。新增-信息{垂直对齐：底部;文本对齐：权利;宽度：250像素;高度：85px;位置：相对; }
。产品网。产品项目。新增-信息.prices {文本对齐：权利;垂直对齐：中间;位置：绝对的;底部：15px的;右：10px的; }
。产品网。产品项目。新增-信息.buttons {垂直对齐：中间;位置：绝对的;底部：15px的;左：10px的;文本对齐：左; }
。产品网。产品项目。新增-信息.prices .productPrice {颜色：绿色; }
。产品网。产品项目。新增-信息.prices .oldproductPrice {颜色：红色;文本修饰：线通过; }

产品包装盒$ C $下加入：

 ＆LT;％@控制语言=C＃AutoEventWireup =真继承=NopSolutions.NopCommerce.Web.Modules.ProductBox1Control
  codeBehind =ProductBox1.ascx.cs％GT;
＆LT;％@注册标签preFIX =nopCommerce变量名=ProductPrice2SRC =〜/模块/ ProductPrice2.ascx％GT;＆LT;脚本类型=文/ JavaScript的LANGUAGE =JavaScript的SRC =../脚本/ jquery.expander.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    //你可以覆盖默认选项全球范围内，因此它们适用于每个.expander（）调用
    //$.expander.defaults.slicePoint = 50;    $（文件）。就绪（函数（）{
        //简单的例子，全部采用默认选项，除非全球覆盖
        //$('div.expandable H3'）扩展器（）。        // *** 要么 ***        //覆盖默认选项（也覆盖全局覆盖）
        $（'div.expandable H3'）。膨胀（{
            slicePoint：50，//默认为100
            扩大preFIX：'......'，//默认为'...'
            expandText：'＆GT;＆GT;'，//默认为阅读更多
            collapseTimer：5000，//重新坍塌5秒后;默认值是0，所以没有再崩溃
            userCollapseText：'＆LT;＆LT;' //默认为读少
        }）;    }）;
＆LT; / SCRIPT＆GT;
＆LT;％ - ＆LT; D​​IV CLASS =产品项目＆GT;
  ＆LT; H2类=产品称号＆GT;
    ＆LT; ASP：超链接ID =hlProduct=服务器/＆GT;
  ＆LT; / H＆GT;
  ＆LT; D​​IV CLASS =图片＆GT;
    ＆LT; ASP：超链接ID =hlImageLink=服务器/＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =描述＆GT;
    ＆LT; ASP：文字=服务器ID =lShortDescription＆GT;＆LT; / ASP：文字＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =附加信息＆GT;
    ＆LT; D​​IV CLASS =涨价＆GT;
      ＆LT; nopCommerce：ProductPrice2 ID =ctrlProductPrice=服务器的ProductId ='＆LT;％＃的eval（产品编号）％＆GT;' /＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =按钮＆GT;
      ＆LT; ASP：按钮=服务器ID =btnProductDetails按需=btnProductDetails_Click
        文字=＆LT;％$无presources：Products.ProductDetails％＆gt;中的ValidationGroup =产品详细
        CommandArgument ='＆LT;％＃的eval（产品编号）％＆GT;'的CssClass =productgridproductdetailbutton/＆GT;＆LT; BR /＆GT;
      ＆LT; ASP：按钮=服务器ID =btnAddToCart按需=btnAddToCart_Click文本=＆LT;％$无presources：Products.AddToCart％＆gt;中
        的ValidationGroup =产品详细CommandArgument ='＆LT;％＃的eval（产品编号）％＆GT;'的CssClass =productgridaddtocartbutton/＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;  - ％GT;
＆LT; D​​IV CLASS =pblock＆GT;    ＆LT; D​​IV CLASS =borderProd＆GT;
        ＆LT; D​​IV CLASS =扩展＆GT;
            ＆LT; H3＆GT;
                ＆LT; ASP：超链接ID =hlProduct=服务器/＆GT;
            ＆LT; / H3 GT＆;
        ＆LT; / DIV＆GT;        ＆LT; ASP：文字=服务器ID =lShortDescription可见=假＆GT;＆LT; / ASP：文字＆GT;
    ＆LT; / DIV＆GT;  ＆LT; D​​IV CLASS =IMG＆GT;
    ＆LT;一个ID =hlImageLink=服务器＆GT;
        ＆LT; IMG ID =hlImage=服务器的风格=最大宽度：170像素;最大高度：120像素/＆GT;
    ＆所述; / A＆GT;
  ＆LT; D​​IV CLASS =身体＆GT;  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =身体＆GT;
    ＆LT; nopCommerce：ProductPrice2 ID =ctrlProductPrice=服务器的ProductId ='＆LT;％＃的eval（产品编号）％＆GT;' /＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; ASP：标签ID =labUniversal=服务器前景色=蓝色文本=＆GT;＆LT; / ASP：标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


解决方案

我的物品箱的高度设置为275px解决了这一问题。
谢谢大家对你的帮助。

I am having styling issue with products loaded in datalist control in Chrome. While everything looks ok in FF, Chrome gives me weird styling. Here are the screenshots:

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

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

Here is the html markup: 

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

Here is the 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; }

PRODUCT 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>

解决方案

I fixed the problem by setting the height of the item-box to 275px. Thanks everyone for your help.

这篇关于造型问题，在Chrome与DataList控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆