Question

我对css有点新鲜，我正在做的很多事情被复制或用Google搜索，所以我对这可怕的错误前景感到非常冷淡。让我告诉你我想做什么：

我有一个php论坛脚本（我的小论坛），我想插入一个带有页眉，页脚和内容的标准css假帧类型包装器。现在论坛软件使用smarty模板引擎，所以我正在编辑tpl文件。我知道这一切都很好，因为我在Dreamweaver中生成的包装器没有问题。它完成了一个给我带来麻烦的手。

现在我可以使用Dreamweaver来制作我的css框架集，但它很懒，我想知道为什么它在Firefox，Chrome和Safari中不起作用。我确定它只是语法。

首先，您可以在IE9中访问我的网站，看看它是否按设计运行：因流量而移除网址 - 谢谢！

我将论坛脚本嵌套在990px包装器中，使用单独的标题，内容和页脚包装器，位于论坛索引页面的主要智能主题模板中。看起来不错。不用担心。

现在，如果您在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>

注意：标记被切碎并放入智能模板中，这里显示的纯粹是为了参考。它必须工作正常，因为它在IE中看起来不错，所以我很确定它是我的css语法问题。是新的，不知道浏览器如何解释这些事情之间的差异。

任何帮助你都可以让我理解为什么我的定位在Chrome，FF和Safari中被忽略而在IE中却没有被忽略。：d

Answer 1

@您在自己网站上提到的链接，如果您查看该网页的HTML源代码，您会看到您的网页上有条件评论会破坏您在FF，Chrome等上的HTML并且您的网页仅有效在IE中。你有一个代码：

以上HTML代码行意味着这将被解读为：在Internet Explorer上所有其他浏览器都空白（无）

这些代码被称为条件注释，只能在IE上运行，只有在必须编写某些特定于IE的代码时才能使用。请参阅：http://en.wikipedia.org/wiki/Conditional_comment

由于您不熟悉开发用户界面，我建议您：

将页面另存为HTML
使用适当的标签和间距缩进
在Firefox上使用像Firebug这样的工具（通过预览您希望制作的HTML和CSS编辑，可以节省大量时间）
在所有浏览器上使此页面正常工作
现在使用模板引擎实现您所做的更改。

CSS'假'框架在FF，Chrome＆amp; Safari但在IE中很好

1 个答案: