Asp.net的CSS样式的GridView [英] Asp.net Css Gridview Styling

问题描述

我有一个asp.net的GridView。我一直在使用应用底纹样式主标题栏。
这工作正常，在IE9中，但它不使用阴影在Chrome中。我使用DIV等完全相同的阴影在我的web应用和Chrome和IE9做工精​​细。
那么，为什么浏览器不喜欢我的CSS？ （特别是在.mGrid 3底纹线条th发如下图所示）

谢谢
大摩

HTML code

 ＆LT; ASP：GridView控件ID =GridViewMainOnRowDataBound =的RowDataBoundOnPageIndexChanging =gridView_PageIndexChanging
                                        =服务器AllowPaging =真每页=50PagerSettings-位置=TopAndBottom
                                        的CssClass =MGRID
                                        PagerStyle-的CssClass =PGR
                                        AlternatingRowStyle-的CssClass =ALT
                                        ＆GT;
                                     ＆LT; / ASP：GridView的＆GT;
 

CSS

  / * *网格的/.mGrid {宽度：100％;背景色：#FFF;保证金：为5px 0 0 10px的;边框：1px的固体＃525252;边境崩溃：崩溃; FONT-FAMILY：宋体;字体大小：12像素; }.mGrid TD {填充：2px的;边框：1px的固体＃c1c1c1;颜色：＃003366; }.mGrid日{填充：2px的4PX;颜色：＃000000;
            过滤：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃FFFFFF'，endColorstr ='＃99CCFF'）; / *为IE * /
            背景：-webkit-梯度（线性，左上，左下，从（#FFF），到（＃9CF））; / *为WebKit浏览器* /
            背景：-moz-线性渐变（顶部，#FFF，＃9CF）; / *用于Firefox 3.6+ * /
            背景：＃99CCFF;字体大小：0.9em;边界：2px的固体＃c1c1c1;
          }.mGrid .ALT {背景：#fcfcfc; }.mGrid .pgr {背景：#FFFFFF; }.mGrid .pgr表{保证金：为5px 0; }.mGrid .pgr TD {边框宽度：0像素;填充：0 6个像素;左边框：1px的固体＃666;字体重量：大胆的;颜色：#FFF;行高：12px的; }.mGrid .pgr一个{颜色：＃666;文字修饰：无; }.mGrid .pgr：悬停{颜色：＃000;文字修饰：无; }.mGrid TR：悬停{背景颜色：#FFFFCC;颜色：白色;}/ *结束网格* /
 

解决方案

需要把行

 背景：＃99CCFF;字体大小：0.9em;边界：2px的固体＃c1c1c1;
 

施加遮光之前。如下所示。现在固定的。
谢谢
DAMO

  .mGrid日{填充：2px的4PX;颜色：＃000000;
             **背景：＃99CCFF;字体大小：0.9em;边界：2px的固体＃c1c1c1; **
            过滤：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃FFFFFF'，endColorstr ='＃99CCFF'）; / *为IE * /
            背景：-webkit-梯度（线性，左上，左下，从（#FFF），到（＃9CF））; / *为WebKit浏览器* /
            背景：-moz-线性渐变（顶部，#FFF，＃9CF）; / *用于Firefox 3.6+ * /          }
 

I have an asp.net gridview. i have applied a style to the main headings bar using shading. This works fine in IE9 but it doesnt use the shading in Chrome. I use the exact same shading for div etc in my webapplication and both Chrome and IE9 work fine. So why does Chrome not like my CSS? (specifically the 3 shading lines in .mGrid th shown below)

thanks Damo

HTML Code

<asp:GridView ID="GridViewMain" OnRowDataBound="RowDataBound" OnPageIndexChanging="gridView_PageIndexChanging"
                                        runat="server"  AllowPaging="True" PageSize="50" PagerSettings-Position="TopAndBottom"
                                        CssClass="mGrid"
                                        PagerStyle-CssClass="pgr"
                                        AlternatingRowStyle-CssClass="alt"
                                        >
                                     </asp:GridView>

CSS

/* Grids */

.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px; }

.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }

.mGrid th { padding: 4px 2px; color: #000000; 
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */
            background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;         
          }

.mGrid .alt { background: #fcfcfc; }

.mGrid .pgr {background: #FFFFFF; }

.mGrid .pgr table { margin: 5px 0; }

.mGrid .pgr td { border-width: 0px; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }  

.mGrid .pgr a { color: #666; text-decoration: none; }

.mGrid .pgr a:hover { color: #000; text-decoration: none; }

.mGrid tr:hover{background-color:#FFFFCC;color:white;}

/* End Grids */

解决方案

need to put the line

background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1; 

before the shading is applied. As shown below. now fixed. thanks damo

.mGrid th { padding: 4px 2px; color: #000000;
             **background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;**  
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */

          }

这篇关于Asp.net的CSS样式的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！