asp.net – Chrome中的样式问题与datalist
发布时间:2020-12-16 09:47:40 所属栏目:asp.Net 来源:网络整理
导读:我在Chrome中的数据控件中加载的产品存在样式问题. 虽然在FF中一切看起来都不错,Chrome给了我奇怪的造型. 以下是截图: FF:http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023 Chrome:http://gyazo.com/4459dc38dc01a18f62780392d8fb3625.
我在Chrome中的数据控件中加载的产品存在样式问题.
虽然在FF中一切看起来都不错,Chrome给了我奇怪的造型. 以下是截图: FF:http://gyazo.com/214fcfafbfb91e17ea1f084af84e61e4.png?1341955023 Chrome: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; } 产品箱代码增加: <%@ 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> 解决方法
我通过将项目框的高度设置为275px来解决问题. 谢谢大家的帮助.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?
- asp.net – Datatable的行计算功能
- asp.net – 在单独的配置文件中移出web.config
- asp.net-mvc – ASP.NET MVC使用带有Html.BeginForm的两个输
- 用于ASP c中酒店房间可用性的SQL
- 强制CamelCase在ASP.NET WebAPI每个控制器
- asp.net-mvc – ASP.NET MVC PostAuthorizeRequest(和其他事
- asp.net-mvc-3 – ASP.Net MVC 3多个CheckBoxLists
- asp.net-mvc-3 – ASP.NET MVC 3控制器路由 – 使家庭控制器
- asp.net-mvc – 用于创建具有模型和ViewData项目的ViewData
推荐文章
站长推荐
- asp.net-mvc-3 – 数据注释MVC3必需属性
- asp.net core封装layui组件示例分享
- asp.net – 在内容页面的主页面上设置属性值
- 使用Lucene.NET实现简单的站内搜索
- asp.net-mvc – 自定义验证属性不在客户端上工作
- asp.net – 单击时更改asp:CheckBox的文本
- .net-4.0 – 从自定义IHttpHandler调用MvcHttpHa
- asp.net-mvc – ASP.NET Web优化 – 无需捆绑即可
- asp.net-mvc – ASP.Net [HiddenInput]数据属性在
- ASP.NET MVC/C++#:我可以避免在单行C#条件语句中
热点阅读