保证金：0 自动；链接到外部 css 时不起作用
当我链接到外部样式表时，我的包装样式似乎已损坏。如果我将样式粘贴到 index.html 的头部，它就可以正常工作，但在链接到 .css 时就不行了。所有其他 css 规则都可以完美地工作，只有包装样式似乎被破坏了。
应用于包装器的唯一规则是将其在浏览器中居中，因此如果有其他合理的方法来实现此目的，我会洗耳恭听。
包装器 css：
#wrapper {
width: 960px;
margin: 0 auto;
}
和 html（减去内容）：
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
任何帮助或建议都会很棒。
编辑：这里是完整的CSS：
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
编辑添加：网站尚未上线，因此我没有提供链接，抱歉。仍处于早期开发阶段，陷入了这个问题。
When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.
the wrapper css:
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.
EDIT: here is the full css:
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您使用什么浏览器？我刚刚在 IE8 中尝试了您的示例，除非我包含 XHTML 文档类型，否则它根本不会居中：
不知道为什么，或者如果您有这个或没有，但它可能会有所帮助。
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
No idea why, or if you have this or not, but it may help.
查看您正在使用的页面的源代码，然后单击您所链接的 CSS 文档。它应该会弹出一个包含您的样式的 CSS 页面，如果没有，您要么 1) 没有正确链接它，要么 2) 服务器上存在权限问题。
添加：在开发者工具中检查（F12 -> IE，左键单击>检查元素 -> chrome、Firefox）。
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
无论您的 css 规则是在外部样式表中还是在
验证您的 CSS 文件（会通知您拼写错误）http://jigsaw.w3.org/ css-validator/
您有多个 css 文件吗？如果是这样，请尝试最后包含此样式表。
使用 firebug（或 chrome 检查器，如果您愿意）检查您的 #wrapper 元素，看看您的定义是否完全显示（以及它是否被否决以及被什么否决）。
如果可能的话，我很想看到您的整个解决方案，这样我就可以四处看看:)
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
I would love to see your entire solution if possible, so i can poke around :)
我以前从未遇到过这个问题。您的链接可能不正确
确保您正确附加了样式表：
如果它位于文件夹中（例如样式）：
如果您的网页位于文件夹中，则需要在前面添加“../”
您还可以尝试
!important如果这不起作用，请右键单击
wrapper元素，然后单击 Chrome 中的“检查元素”。这将向您显示该元素上所有应用的 css，以及哪些内容被哪些内容覆盖。这将使您更好地了解实际情况（下载适用于 Firefox 的 Firebug 也很有帮助）I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
If it is in a folder (say Styles for ex):
If your webpage is in a folder then you need to add "../" to the front
You can also try
!importantIf that does not work, then right click the
wrapperelement and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)