Firefox PHP包含和CSS_Php_Html_Css_Include

Firefox PHP包含和CSS

php html css

Firefox PHP包含和CSS,php,html,css,include,Php,Html,Css,Include,我觉得我的问题有点特别，基本上我在使用PHP include时在Firefox中显示一些CSS样式时遇到了问题我有index.php和header.php，它们包含在索引文件中。头文件包含本教程中的代码，当我在Firefox的独立html文件中运行它时，它可以正常工作，但在header.php文件中，它不能正确显示它在其他浏览器中的位置网址如下：如果您在除FF之外的任何浏览器中查看它，它应该会显示一个不错的下拉菜单，但在FF中它真的很糟糕，只有在我为header.php文件使用includ

我觉得我的问题有点特别，基本上我在使用PHP include时在Firefox中显示一些CSS样式时遇到了问题

我有index.php和header.php，它们包含在索引文件中。头文件包含本教程中的代码，当我在Firefox的独立html文件中运行它时，它可以正常工作，但在header.php文件中，它不能正确显示它在其他浏览器中的位置

网址如下：

如果您在除FF之外的任何浏览器中查看它，它应该会显示一个不错的下拉菜单，但在FF中它真的很糟糕，只有在我为header.php文件使用include语句的实例中（静态html文件工作得很好）

My index.php文件包含以下代码：

<?php include("header.php"); ?>

我的header.php与我在本文前面链接的教程中的代码完全相同。My style.css的代码与教程中的代码完全相同

为了进行比较，下面是同一代码的静态版本，它在FF中非常有效：

我不太确定需要什么其他信息来解决这个问题，但希望这足够了，如果需要，我可以提供任何其他信息

提前谢谢

编辑-以下是index.php和header.php的完整代码

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Jon Cleave</title>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <script src="js/scripts.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jScrollPane.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>


    <script type="text/javascript">
        $(document).ready(function() {
            $('.open1').hide();

            $('.close1').click(function() {
                $('.info').slideUp('slow', function() {
                    // Animation complete.
                });

            $('.close1').hide();
            $('.open1').show();

            });
        });

        $(document).ready(function() {
            $('.open1').click(function() {
                $('.info').slideDown('slow', function() {
                    // Animation complete.
                });

            $('.open1').hide();
            $('.close1').show();

            });
        });
    </script>

</head>    
<body>

<?php require "header.php"; ?>

<!-- BEGIN BACKGROUND PICTURES -->
<div id="loader" class="loading"></div>
<div id="bkgallery">

    <ul>
        <li><img src="work/work1.png" id="im1" alt=""/> </li>  
        <li><img src="work/triworks_arch2.jpg" id="im2" alt=""/> </li> 
        <li><img src="work/triworks_arch3.jpg" id="im3" alt=""/> </li>  
    </ul>

    <div class="close1">x</div>
    <div class="open1">+</div>
    <div class="info">Info box 1</div>
    <div class="info two">Info box 2</div>

    <a href="" class="next" title="next page">next</a>
    <a href="" class="prev" title="prev page">prev</a>
</div><!-- #bkgallery -->
<!-- END BACKGROUND PICTURES -->

<!-- END CONTENT -->

<!-- END FOOTER -->

</body>


乔恩·克里夫
$（文档）.ready（函数（）{
$（'.open1'）.hide（）；
$（'.close1'）。单击（函数（）{
$（'.info'）.slideUp（'slow'，function（）{
//动画完成。
});
$（'.close1'）.hide（）；
$（'.open1'）.show（）；
});
});
$（文档）.ready（函数（）{
$（'.open1'）。单击（函数（）{
$（'.info'）.slideDown（'slow'，function（）{
//动画完成。
});
$（'.open1'）.hide（）；
$（'.close1'）.show（）；
});
});





x
+
信息框1
信息框2

Footer.php

    <div id="header">
    <div id="logo"><h1>Jon Cleave</h1></div>

    <div id="nav">
        <ul class='drop-down'>
        <li class="top"><a href='#nogo'>index</a>
            <ul>
            <li><a href='#nogo1'>Male</a></li>
            <li><a href='#nogo2'>Female</a></li>
            </ul>
        </li>
        <li class="top"><a href='#nogo3'>case studies</a>
            <ul>
            <li><a href='#nogo4'>Blond</a></li>
            <li><a href='#nogo5'>Brown</a></li>
            <li><a href='#nogo6'>Black</a></li>
            <li><a href='#nogo7'>Red</a></li>
            </ul>
        </li>
        <li class="top"><a href='#nogo8'>cv</a>
            <ul>
            <li><a href='#nogo9'>Blue</a></li>
            <li><a href='#nogo10'>Green</a></li>
            <li><a href='#nogo11'>Brown</a></li>
            <li><a href='#nogo12'>Grey</a></li>
            </ul>
        </li>
        <li class="top"><a href='#nogo8'>contact</a>
            <ul>
            <li><a href='#nogo9'>Email</a></li>
            </ul>
        </li>
        </ul>
    </div>

</div><!-- header -->


乔恩·克里夫

通常发生这种情况时，问题是因为您的文件是用带有BOM的UTF-8编码的。BOM表充当不可见字符，但会导致布局问题

大多数编辑器（除记事本外）允许您编码为“无BOM的UTF-8”，因此如果可以，您应该使用该选项

如果没有，不要使用UTF-8。就我个人而言，我仍然在用ISO-8859-1完成我的所有工作，如果我需要Unicode字符，我会使用HTML实体

BOM解释-

问题源于样式表，第284行和第299行：

.close1 {
    position: fixed;
    color: #fff;
    top: 65px;
    left: 30px;
    display: block;
    background: #444;
    width: 208px;
    padding: 0px 0px 1px 8px;
    opacity:0.8;
    z-index: 0;
    background-image: url("../img/close.png);
    background-repeat: repeat;
}

.open1 {
    position: fixed;
    color: #fff;
    top: 65px;
    left: 30px;
    display: block;
    background: #444;
    width: 208px;
    padding: 0px 0px 1px 8px;
    opacity:0.8;
    z-index: 0;
    background-image: url("../img/close.png);
    background-repeat: repeat;
}

请注意

背景图像的开头“
和缺少的结尾”
？这会导致之后的所有声明被忽略。
应该是的声明包括“header.php”括号不是必需的。在其他浏览器中？它在其他浏览器中都能完美工作，只有FF，并且只有在我使用PHP include时才能工作。为了比较，这里有一个相同代码的静态版本，它在FF中工作：爱在这里绕圈子。首先建议删除可选括号，然后切换require，这两个选项都没有任何效果，然后向提问者抛出一个大多数人都不知道如何做的任务……你能详细说明一下BOM是什么吗比我能解释的要好得多。谢谢你的回复。所以我要么使用一个可以编码为UTF-8而无需BOM的文本编辑器，要么将我的字符集从UTF-8更改为ISO-8859-1？这应该可以解决这个问题？就是这样！我不敢相信我没有注意到那些错误。非常感谢你。