个人中心
gpt4 book ai didi

CSS 'fake' 框架在 FF、Chrome 和 Safari 中不起作用，但在 IE 中正常

转载 作者：行者123 更新时间：2023-11-28 10:19:06 25 4
gpt4 key购买 nike

我对 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/

25 4 0
文章推荐： json - Swift 完成处理程序问题
文章推荐： ios - 向对象数组添加二级排序
文章推荐： iOS - 检测用户是否在应用程序沙箱之外触摸屏幕
文章推荐： ios - 如何知道父类(super class)指定的初始值设定项？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com