<asp:GridView> 宽度，<div> 宽度答案

【问题标题】：<asp:GridView> width, <div> width<asp:GridView> 宽度，<div> 宽度
【发布时间】：2009-03-22 11:00:36
【问题描述】：

我有以下标记代码：

<div style="width: 72%; margin: 15px; margin-left: auto; margin-right: auto;">
    <center>
        <div style="border-top: Solid 1px Black; border-left: Solid 1px Black; border-right: Solid 1px Black;
        padding: 5px; background-color: #EEEEEE;">
        </div>
        <asp:GridView Style="width: 100%;" BorderWidth="1px" BorderColor="Black">
        </asp:GridView>
    </center>
</div>

结果是这样的：

左上角对齐不一致的原因可能是什么？

编辑：这只发生在 Firefox 中。我想知道我应该如何解决这个问题。微不足道，我知道，但是嘿。

【问题讨论】：

它只发生在 Firefox 中。它在 IE 上运行良好。
为 GridView 生成的 html 是什么样的？
差异也显示在 Chrome 中，fwiw！
@jester，感谢您花时间测试它，但我发现它在 chrome 中可以正常工作！
我荒谬地认为您问题中的图像正在呈现有问题的 html。哦！如果您愿意，请继续删除您的回复，我将删除我上面的评论（“差异也显示在 Chrome 中，fwiw！”）以便我们可以整理这些 cmets，如果您愿意。

标签： asp.net html css firefox

【解决方案1】：

网格（即表格）的边框在 100% 宽度之外（这是标准模式 CSS 的工作方式）。在标准模式下，中心标签也会被贬值。

您可以用来解决此问题的一个技巧是将内部 div 标记重写为类似于网格的表格：

<table style="border-top: Solid 1px Black; border-left: Solid 1px Black; 
  border-right: Solid 1px Black; border-collapse:collapse; 
  background-color: #EEEEEE; width:100%">
  <tr>
    <td style='padding: 5px'>(inner stuff)</td>
  </tr>
</table>

这样它将在表格外具有相同的边框。

【讨论】：