为什么背景颜色不能使用 <header> 标签在 html 5 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4394952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why wont background-color work in html 5 using the <header> tag?
提问by Sarmen B.
here is my html for some reason the header tag isnt accepting the background color for black..
这是我的 html 出于某种原因标题标签不接受黑色的背景颜色..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content=""/>
<meta name="description" content="" />
<style type="text/css">
header {
background:black;
}
nav ul li {
float:left;
margin-left:20px;
display:block;
}
nav ul li {
text-transform:capitalize;
padding:5px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.php">today's deals</a></li>
<li><a href="recent.php">recent deals</a></li>
</ul>
<div class="clear"></div>
</nav>
</header>
</body>
</html>
采纳答案by Breezer
have you tried
你有没有尝试过
background-color:black;
well it could be it's not supported still
好吧，它可能仍然不受支持
this worked for me
这对我有用
header {
background-color:black;
display:block;
overflow:hidden;
}
for thoose browsers that do support it i guess why nothing wasn't displayed at first glance it's because the default behaviour isn't using it as a regular element rather then making the page more seo friendly
对于那些支持它的浏览器，我想为什么乍一看没有显示任何内容，这是因为默认行为不是将其用作常规元素，而是使页面更加 seo 友好
回答by alexharriss
I've got it! I know it's been a while, but I was having the same problem. You must remember to apply width and height attributes to the header or it will not work.
我懂了！我知道已经有一段时间了，但我遇到了同样的问题。您必须记住将宽度和高度属性应用于标题，否则它将不起作用。
header {
background-color: black;
display: block;
width: 960px;
height: 300px;
}
I had the same problem, because the background only covered paragraph or other tags, not the whole area.
我遇到了同样的问题，因为背景只覆盖了段落或其他标签，而不是整个区域。
回答by Jason Aller
Use background-colorrather than background. Then add display:block;
使用background-color而不是background. 然后加display:block;
header {
background-color: black;
display: block;
}
回答by Gregg B
You don't have anything attached to your clear class. Do this:
你没有任何附加到你的 clear 类。做这个：
<header>
<nav>
<ul>
<li><a href="index.php">today's deals</a></li>
<li><a href="recent.php">recent deals</a></li>
</ul>
<br clear="all">
</nav>
</header>
Alternatively just add:
或者只需添加：
.clear{
clear: both;
}
回答by Daniel X Moore
You'll need something like the CSS from HTML5 Boilerplate to ensure a consistent look on the widest range of older browsers.
您需要像HTML5 Boilerplate 中的 CSS 之类的东西，以确保在最广泛的旧浏览器上具有一致的外观。
Though <header>and other elements can have styles applied in older IE version when using something like html5shiv, they won't have consistent CSS resets like display: blockthat you might expect.
虽然<header>和其他元素在使用html5shiv 之类的东西时可以在较旧的 IE 版本中应用样式，但它们不会像display: block您期望的那样具有一致的 CSS 重置。
