Question

在IE8和Firefox中，我遇到以下情况：

我有一个高度为30px的面板，在这个面板中我有一个高度为30px的单行表。当它显示在浏览器窗口时，表格没有填满面板的高度（顶部和底部有少量面板显示。如何更正此表，以便表格占据表格的整个高度？

HEADERPANELTABLE CSS：

table.masterHeader
{
    background-color:transparent;
    border-collapse:collapse;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    margin-bottom:0;
    padding:0;
    display:block;
    width:820px;
    }

HEADERPANEL CSS：

.HeaderPanel
        {
            background-color:#0079d0;
            height:30px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:0px;
            margin-top:0px;
            padding:0;
            width:820px;
            }

SPACER CSS：

div.Spacer
{
    background-color:transparent;
    height:30px;
    }

MAINPANEL CSS：

.MainPanel
{
    background-color:#6699cc;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    width:820px;
    }

HTML CODE：

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
    <asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
        <table class="masterHeader" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Account"></td>
                <td class="Name"></td>
                <td class="Spacer"></td>
                <td class="CompanyName"></td>
                <td class="Logout"></td>
            </tr>
        </table>
    </asp:Panel>
    <asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
    <div class="Spacer">&nbsp;</div>
    <asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
    </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>

Answer 1

将cellspacing设置为0

<table cellspacing="0">
   <tr>
      <td></td>
   </tr>
</table>

Answer 2

你是否看过类似Firebug的页面，你可以在其中查看每个DOM元素，查看属性（如margin，padding等）。这样您就可以确切地看到额外间距的来源，以及每个元素应用的样式属性。

Answer 3

您尚未发布代码（HTML或CSS）或说明了您所看到的浏览器，因此很难确定。一些建议：

确保您的表格没有边距
确保面板没有任何填充
确保单元格间距为零
确保其他一些元素没有阻止表格
确保您的CSS样式没有被某些地方覆盖

如果您还没有，则应为Firefox安装Firebug插件https://addons.mozilla.org/en-US/firefox/addon/1843/。这使得检查应用的DOM和CSS样式非常容易。

Answer 4

我注意到你没有对桌面边框做任何事情。这可能是你看到的差距吗？如果您的边框因任何原因有任何宽度，那么它们可能会显示哪些可能会给您带来相同的效果。

我基于我假设输出的HTML看起来最简单的形式，做了一个快速的jsfiddle概念证明。我不熟悉RoundedCornersExtender控件，我怀疑它正在修改主div的HTML。

http://jsfiddle.net/tAgp3/1/

你可以看到这个简化的形式有效，但我认为圆角试图做一些讨厌的技巧，嵌入额外的DIV与背景做圆角。这些可能是导致你额外填充的原因。

我再次问你是否可以发布输出到浏览器的实际 html，这样我们就可以看出是否是这种情况。

Answer 5

因为ASP：Panel将面板分解成div标签并且带有圆角，所以在放置表格后放置的面板上添加了1px边框。为了解决这个问题，必须将表放在div标签内并将div浮动到面板上方。

桌面高度需要与面板高度相同

5 个答案: