FF/chrome 中的背景颜色样式

发布于 2024-11-06 07:08:38 字数 3889 浏览 0 评论 0原文

有谁知道为什么我的“容器”div 没有显示其父 div 的白色背景颜色？我从 CSS 正文设置中获取黑色（在我的示例中为石灰，以便更好地描述）背景颜色。

请原谅草率的样式。我尽力减少代码并展示相关内容。顺便说一句，我尝试过将“容器”div 及其子 div 样式设置为白色；但它仍然不起作用。当我给最高的 div 一个大的 height 属性（比如 1000px）时，它会显示白色，但我认为我不必这样做。它应该是动态的：当 div 内的控件扩展时，div 的高度也应该扩展。我有很多这样的页面，但没有这个问题。但是这是我尝试列 div 的唯一 pg。当我的列的“容器”div 开始时，它就会发生（见图）。是的，这发生在 FF 和 chrome 中。它在 IE 中工作正常

<head runat="server">
  <title>Loaner Transfer</title>
  <link rel="stylesheet" type="text/css" href="../styles/BodyLayout.css" />
  <link rel="stylesheet" type="text/css" href="../styles/columns.css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script language="javascript" type="text/javascript">
    ....
  </script>
</head>
<body>
  <center>
  <div style="text-align:left; width:1160px; background-color:White; border-bottom-width:25px;">
  <div id="divBody">
    <form id="form1" runat="server">
      <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
      </ajx:ToolkitScriptManager>
      <img src="../images/_Logo.gif" alt="Logo" /><br />
      <UI:Header ID="UIHeader" runat="server" />
      <UI:Menu ID="UIMenu" runat="server" />
      <center>
        <h1>Transfer Loaned Items</h1>
        <asp:Label ID="lblStatus" runat="server" ForeColor="red"></asp:Label>
        <br />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ISO" />
        <asp:ValidationSummary ID="ValidationSummary3" runat="server" ValidationGroup="add" />
        <asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="header" />
      </center>
      <br />
      <div id="container" style="width:1140px;">
        <div id="col1" style="width:400px;">
          <h2 style="text-decoration:underline; text-align:center;">Search and select items to transfer</h2>
          <div style="margin-left:25px;">  
            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Pull ISO"></asp:Label>
            <asp:CustomValidator ID="CVSearch" runat="server" ErrorMessage="Invalid ISO entry."
              ControlToValidate="txtSearchISO" ValidationGroup="ISO" ValidateEmptyText="true"
              ClientValidationFunction="CheckMyText">*</asp:CustomValidator>
            <asp:TextBox ID="txtSearchISO" runat="server" Width="50px"></asp:TextBox>
            <asp:Button ID="btnSearchISO" runat="server" Text="Go!" ValidationGroup="ISO" OnClick="btnSearchISO_Click" />
            <asp:Label ID="lblHidISO" runat="server" Text="-1" Visible="false"></asp:Label>
            <br />
            <br />
            <table>
            .....
            </table>
            <br />
          <center>
            <asp:DataGrid.............................</asp:DataGrid>
          </center>
        </div>
        <div id="col2outer" style="width:710px;">  
        <center>
        <!--tables, controls, etc-->
        </center>
      </center>     
        </div>
      </div>
    </form>
  </div>
  </div>
  </center>
</body>

这是我的 CSS：

body
{
    background-color:Black;
}
body.comp
{
    background-color:#F5FCFF;
}
#divBody
{
    margin-left:25px;
}
#divTrans
{
    margin:15px;
}

#container #col1
{
    float: left;
}

#container #col2outer
{
    float: right;
}

#container #footer
{
    text-align:center;
    float: left;
    width: 870px;
}

这是一个 ss：在此处输入图像描述

原文

Does anyone know why my 'container' div isn't showing the white bg-color from it's parent divs? I'm getting the black (Lime in my example for better description) bg-color from the CSS body setting.

Please excuse the sloppy styling. I did my best to reduce the code and show relative stuff. BTW, I've tried making the 'container' div and it's child divs' style bg-color white; and it still doesn't work. When I give the highest div a large height attribute (say 1000px), it shows white to that point, but I thought I didn't have to do that. It should be dynamic: as the controls within the div expand, the divs height should expand as well. I have many pages like that, but don't have this problem.. but this is the only pg where I attempt column divs. And it happens right when my 'container' div for the columns start (see pic). and yea, this happens in FF and chrome. it works fine in IE

<head runat="server">
  <title>Loaner Transfer</title>
  <link rel="stylesheet" type="text/css" href="../styles/BodyLayout.css" />
  <link rel="stylesheet" type="text/css" href="../styles/columns.css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script language="javascript" type="text/javascript">
    ....
  </script>
</head>
<body>
  <center>
  <div style="text-align:left; width:1160px; background-color:White; border-bottom-width:25px;">
  <div id="divBody">
    <form id="form1" runat="server">
      <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
      </ajx:ToolkitScriptManager>
      <img src="../images/_Logo.gif" alt="Logo" /><br />
      <UI:Header ID="UIHeader" runat="server" />
      <UI:Menu ID="UIMenu" runat="server" />
      <center>
        <h1>Transfer Loaned Items</h1>
        <asp:Label ID="lblStatus" runat="server" ForeColor="red"></asp:Label>
        <br />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ISO" />
        <asp:ValidationSummary ID="ValidationSummary3" runat="server" ValidationGroup="add" />
        <asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="header" />
      </center>
      <br />
      <div id="container" style="width:1140px;">
        <div id="col1" style="width:400px;">
          <h2 style="text-decoration:underline; text-align:center;">Search and select items to transfer</h2>
          <div style="margin-left:25px;">  
            <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Pull ISO"></asp:Label>
            <asp:CustomValidator ID="CVSearch" runat="server" ErrorMessage="Invalid ISO entry."
              ControlToValidate="txtSearchISO" ValidationGroup="ISO" ValidateEmptyText="true"
              ClientValidationFunction="CheckMyText">*</asp:CustomValidator>
            <asp:TextBox ID="txtSearchISO" runat="server" Width="50px"></asp:TextBox>
            <asp:Button ID="btnSearchISO" runat="server" Text="Go!" ValidationGroup="ISO" OnClick="btnSearchISO_Click" />
            <asp:Label ID="lblHidISO" runat="server" Text="-1" Visible="false"></asp:Label>
            <br />
            <br />
            <table>
            .....
            </table>
            <br />
          <center>
            <asp:DataGrid.............................</asp:DataGrid>
          </center>
        </div>
        <div id="col2outer" style="width:710px;">  
        <center>
        <!--tables, controls, etc-->
        </center>
      </center>     
        </div>
      </div>
    </form>
  </div>
  </div>
  </center>
</body>

Here is my CSS:

body
{
    background-color:Black;
}
body.comp
{
    background-color:#F5FCFF;
}
#divBody
{
    margin-left:25px;
}
#divTrans
{
    margin:15px;
}

#container #col1
{
    float: left;
}

#container #col2outer
{
    float: right;
}

#container #footer
{
    text-align:center;
    float: left;
    width: 870px;
}

Here is a ss:
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半城柳色半声笛 2024-11-13 07:08:38

看起来您只需要清除浮动。

您可以通过将 overflow:hidden 添加到 #container（或者可能是 #divBody）来实现此目的。

有关清除浮动的更多信息：

学习如何以及何时清除浮动是 CSS 的重要组成部分。如果你早点掌握它，你会避免很多困惑。

回复收藏 0 原文

暖伴 2024-11-13 07:08:38

您是否尝试过：

#container {
    overflow: auto;
}

为什么这可以解决问题，请参阅：

CSS溢出属性

设置的另一种流行用途
奇怪的是，溢出是浮动的
清算。设置溢出不会
清除元素上的浮动，它
自清除。

据我所知，IE 在块元素上默认具有此行为，而 FF/Webkit (Chrome/Safari) 则不然。

所有关于浮动 - 详细信息，请参阅“清除浮动的技术”部分

Did you try:

#container {
    overflow: auto;
}

For why this solves the problem see:

The CSS Overflow Property

One more popular uses of setting
overflow, strangely enough, is float
clearing. Setting overflow doesn't
clear the float at the element, it
self-clears.

From what I recall IE defaults to this behavior on block elements, and FF/Webkit (Chrome/Safari) does not.