如何让 IE 正确显示 GridView Pager 按钮行的边框？

Question

我有一个带有这样的寻呼机按钮的 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 的细边框，以便它与网格的其余部分相匹配。

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

请帮忙！我怎样才能做到这一点？这是在消磨我的时间！谢谢！

Answer 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; }