Question

它应该是显而易见的，但在所有主流浏览器中，div内容都不会被隐藏：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style>
    #confContent{
    border:solid 1px #FF0000;
    width:700px;
        height:600px;
    background-color:#00CC00;
    left:50%;
    display:none;
    position:absolute;
                                                }

</style>

</head>

<body>

        <div id="confContent">
        <p style="color:#0000FF">Some content goes here</p>
        </div>


</body>
</html>

实际上，所有的属性似乎都不起作用，div没有向左移动30％，没有背景颜色，没有隐藏且没有边框。请帮忙。提前完成。

Answer 1

您的CSS需要位于样式标记中（如果不在外部样式表中）

<style>
#confContent{

    border:solid 1px #FF0000;
    width:700px;
    height:600px;
    background-color:#00CC00;
    left:30%;
    display:none;
}   
</style>

应该放在您网页的head

查看新代码，您在文档开头缺少HTML标记（应该在<!DOCTYPE html>之后）

然而，我不认为这也是问题 - 我想也许还有一些我们没有看到的CSS会覆盖你给我们的div属性。

Answer 2

用以下代码替换您的代码：

<!--Confirmation div-->
<div id="confContent">
   <p style="color:#0000FF">Some content</p>
</div>

<style type="text/css">
#confContent{
    border:solid 1px #FF0000;
    width:700px;
    height:600px;
    background-color:#00CC00;
    left:30%;
    display:none;
}     
</style>

使用Danny Hearnah关于HEAD标签的建议

Answer 3

您错过了px财产的width。除此之外，它正在发挥作用。请检查此Demo

如果这仍然不起作用，那么您需要检查CSS文件路径

Answer 4

我的问题已经解决了，对于任何挣扎于此的人，请不要在你的css区块中使用来表达你的意见：

<style>

<!-- DO NOT use this format for comments -->

/* Only this format is valid */

</style>

这阻止了FireFox读取我的css代码并且给我带来了这样的错误：

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

和

Unexpected end of file while searching for closing } of invalid rule set.

display：none不隐藏div内容

4 个答案: