我对 css 有点陌生，我正在做的很多事情都是被复制或用谷歌搜索的，所以我对它可能会出现严重错误的前景感到非常冷静。让我告诉你我正在尝试做什么:
我有一个 php 论坛脚本(我的小论坛)，我想将其插入到带有页眉、页脚和内容的标准 css 假框架类型包装器中。现在论坛软件使用 smarty 模板引擎，所以我正在编辑 tpl 文件本身。我知道这一切都很好，因为我在 Dreamweaver 中生成的包装器可以正常工作。它是手工制作的，这给我带来了麻烦。
现在我只能使用 Dreamweaver 制作我的 css 框架集，但它很懒，我想知道为什么它在 Firefox、Chrome 和 Safari 中不起作用。我确定它只是语法。
首先，您可以在 IE9 中访问我的网站并看到它按设计工作:由于流量原因删除了 url - 谢谢!
我将论坛脚本嵌入一个 990 像素的包装器中，使用单独的页眉、内容和页脚包装器，这些包装器位于论坛索引页面的主要 smarty 主题模板中。看起来不错。不用担心。
现在，如果您在 Chrome、Firefox 或 Safari 中尝试相同的站点，您会看到页眉和页脚存在并按预期工作，但“内容”只是以 100% 的页面宽度加载并忽略 css 样式表设置绝对定位。
这是我的CSS:
/***************STRUCTURE***************************/
* { margin: 0; padding: 0px; }
/* Absolute positioned header for all browsers*/
#header-wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:6em;
}
/* Resets the header position to fixed for real browsers such as Firefox*/
body>div#header-wrapper {
position:fixed;
}
#headercustom {
height:6em;
width:990px;
margin:0 auto;
}
#content-wrapper {
padding:6em 0 0 0;
margin-left:0;
margin-top:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;
padding-bottom:60px;
}
body>#content-wrapper {
margin-left:0;
}
#contentcustom {
width:990px;
margin:0 auto;
}
#footer-wrapper {
width:100%;
position:absolute;
bottom:0;
left:0;
height:60px;
}
body>#footer-wrapper {
position:fixed;
}
#footercustom {
width:990px;
height:60px;
margin:0 auto;
}
/***************STYLE***************************/
#headercustom,
#footercustom {
background:#fff;
color:#000;
}
这是标记:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content-wrapper">
<div id="contentcustom">
content ie forum main script in here
</div>
</div>
<div id="header-wrapper">
<div id="headercustom">
Header content here
</div>
</div>
<div id="footer-wrapper">
<div id="footercustom">
Footer content here
</div>
</div>
</body>
</html>
注意:标记被切碎并适本地放置在 smarty 模板中，它在此处显示仅供引用。它一定工作正常，因为它在 IE 中看起来不错，所以我很确定它是我遇到的 css 语法问题。作为新手，不知道浏览器如何解释这些东西之间的差异。
如果您能帮助我理解为什么我的定位在 Chrome、FF 和 Safari 中被忽略但在 IE 中没有被忽略，那将是极好的。 :D
最佳答案
@您在网站上提到的链接，如果您查看该页面的 HTML 源代码，您会看到您的页面有一个条件注释，它会破坏您在 FF、Chrome 等设备上的 HTML，并且您的页面只能正常工作在 IE 中。你有这样的代码:
上面这行 HTML 代码意味着这将被解读为: 在 Internet Explorer 上 在所有其他浏览器上为空白(无)
像这样的代码被称为条件注释，它只在 IE 上运行，只有在必须编写一些 IE 特定代码时才应该使用它们。请参阅:http://en.wikipedia.org/wiki/Conditional_comment
由于您是开发 UI 的新手，我建议您:
- 将页面保存为 HTML
- 使用适当的制表符和间距缩进
- 在 Firefox 上使用 Firebug 等工具(它可以为您节省大量时间来预览您希望进行的 HTML 和 CSS 编辑)
- 使该页面在所有浏览器上都能正常工作
- 现在使用模板引擎实现您为实现此目标所做的更改。
关于CSS 'fake' 框架在 FF、Chrome 和 Safari 中不起作用，但在 IE 中正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14107412/