3

我对 css 有点陌生，我正在做的很多事情都是被复制或用谷歌搜索的，所以我对它是可怕的错误的前景感到完全不寒而栗。让我告诉你我想要做什么：

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

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

首先，您可以在 IE9 中访问我的网站并看到它按设计工作：由于流量而删除了 url - 谢谢！

我将论坛脚本放置在一个 990px​​ 的包装器中，使用单独的页眉、内容和页脚包装器位于论坛索引页面的主要 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

4

1 回答 1

1

@你在你的网站上提到的链接，如果你查看页面的 HTML 源代码，你会看到你的页面有一个条件注释，它会破坏你在 FF、Chrome 等上的 HTML，并且你的页面只能在 IE 中工作。您有如下代码：

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

像这样的代码被称为条件注释，它只在 IE 上运行，并且只有在必须编写一些 IE 特定代码时才应该使用它们。见：http ://en.wikipedia.org/wiki/Conditional_comment

由于您是开发 UI 的新手，我建议您：

  • 将页面另存为 HTML
  • 使用适当的制表符和间距缩进它
  • 在 Firefox 上使用 Firebug 之类的工具（它可以为您节省大量时间来预览您希望进行的 HTML 和 CSS 编辑）
  • 使此页面在所有浏览器上都能正常工作
  • 现在使用模板引擎实现您为实现此目的所做的更改。
于 2013-01-01T06:45:20.187 回答