Question

<div class="FrameBig" style="float:left; width:25%; height:45px; margin-top:9px; margin-bottom:25px; margin-left:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
<td>Cell Four</td>
</tr>
</table>

</div>

FrameBig是

.FrameBig
{
    background-color:#D1F3FF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

上面的代码生成一个完全为蓝色的表（FrameBig中的背景颜色）

最奇怪的是当我改变它时：

<div class="FrameSmall" style="float:right; width:25%; height:45px; margin-top:9px; margin-right:50px; margin-bottom:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td height=45px width=50% valign="middle">
Diner ID:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerUID" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td height=45px width=50% valign="middle">
Diner Name:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerNameUID" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>

你会期望它与第一个相同，背景为蓝色，但由于某种原因，只有第一行是蓝色，第二行是白色。

有人可以提供任何解释吗？ CSS文件的其余部分绝对没有任何可能干扰的内容。

Answer 1

不，这是您代码中的错误。你已经设置了容器div的类，我认为也发生了错字。在第一个代码中，两个trs的高度在45px [div的高度]的范围内。但是在第二个例子中，每个tr的高度都是45px，这也就是为什么颜色仅用于第一个tr。

将类“FrameBig”更改为div中的表格，您将获得所有行的背景颜色为蓝色。

<style>
.FrameBig
{
    background-color:#D1F3FF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

</style>
<div style="float:right; width:25%; height:45px; margin-top:9px; margin-right:50px; margin-bottom:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px" class="FrameBig">
<tr>
<td height=45px width=50% valign="middle">
Diner ID:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerUID" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td height=45px width=50% valign="middle">
Diner Name:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerNameUID" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>

Answer 2

这是预期的行为 - 表格大于div，颜色是div 的背景颜色，而不是表格或第一行。
见：W3 on overflow
QuirksMode - Overflow visible
jsbin：Your table with half a row colored

Answer 3

您的div FrameSmall高度为45px，就像您表格的第一行一样。你的css中肯定存在一些不正确的东西。

这是一个CSS错误吗？

3 个答案: