如何让IE正确显示我的GridView寻呼机按钮行的边框?

时间:2012-09-14 21:05:42

标签: asp.net css internet-explorer gridview border

我有一个带有寻呼机按钮的GridView:

<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<" NextPageText=">" LastPageText=" >>" Position="Bottom" />

将寻呼机样式设置为:

<PagerStyle CssClass="gridPager" HorizontalAlign="Right" />

请看一下我的风格:

   .gridPager
   {
       border-collapse: collapse;
       border-width: 1px;
       border-color: Green;
       border-style: solid;   
       font-size: 7pt;
    }

    .gridPager td
    {
        padding-left: 5px;   
    }

我的寻呼机按钮行上的绿色边框未显示在Internet Explorer中

我怀疑是因为IE无法识别 tr 元素上的边框样式。

我怀疑这是因为当我按下F12并查看IE开发人员视图时,我看到GridView生成的表为包含寻呼机按钮的行创建了这个:

 <tr class="gridPager" align="right">
    <td colspan="3"><table border="0">
    <tr>
    <td><a href="...pager button links"  </td>
   </tr>
</table></td>
  </tr>

注意 tr ...

上的样式

我发现了这个: https://stackoverflow.com/a/583600/614263

我试图按照该帖子中的说明操作,但没有运气。 但是,当我设置边框宽度 2px 或更高时, 可以正常工作。但这并不好,我需要薄的1px边框,以便与网格的其余部分匹配。

我想要做的就是围绕我的寻呼机按钮,使用与网格中其余行相同颜色的边框。

请帮忙!我怎样才能做到这一点?这是在节省我的时间!谢谢!

1 个答案:

答案 0 :(得分:1)

尝试不同的方法。而不是样式化.gridPager('tr')标签而是将样式放在桌面上

.gridPager table { ...styles here...}

您可能需要在表格之前的第一个'td'中消除填充/边距,但这应该很容易完成。

.gridPager td { padding: 0; margin: 0; } /* this will affect all td tags */
.gridPager table td { padding-left: 5px; } /* add the padding back to the table td tags */

对我来说 ...我通常会为整个表格设置边框边框以外的边框。然后我通过'td'标签添加各行行。我把表格放到了GridLines =“none”。

/* this line give the table a border on the three sides - the main grid view table */
.gridTable { border: solid 1px #000; border-width: 1px 1px 0 1px }

/* then I put in the row styles */
.gridTable td { border-bottom: solid 1px #000; }

/* Then I fix the pager styles up with no border on the 'td' tag */
.gridTable table td { border: 0; }