Question

我觉得我的问题有点特殊，基本上我在使用PHP包含时在Firefox中显示一些CSS样式时遇到了麻烦。

我有我的index.php和header.php，它包含在索引文件中。头文件包含来自本教程http://www.basewebmaster.com/css/simple-css-drop-down-menu.php的代码，当我在Firefox中的独立html文件中运行它时可以正常工作，但是在header.php文件中它没有正确显示它在其他所有浏览器中的位置。

该网站位于：http://createful.com/cleave

如果你在FF以外的任何浏览器中查看它，它应该显示一个很好的下拉菜单，但在FF中它真的搞砸了，只是在我的header.php文件中使用include语句的实例（静态html文件）效果很好。

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

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

我的header.php包含我在本文前面链接的教程中的确切代码。我的style.css也有与教程中一样的确切代码。

为了比较，这里是相同代码的静态版本，在FF中完美运行：http://www.createful.com/cleave/test/index.html

我不太确定需要哪些其他信息才能解决这个问题，但希望这已足够，但如果需要，我可以提供任何其他信息。

提前致谢。

编辑 - 这是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>

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 -->

Answer 1

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

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

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

BOM说明 - http://en.wikipedia.org/wiki/Byte_Order_Mark

Answer 2

您的问题源自样式表，第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;
}

请注意"的开场"和缺席结束background-image？这会导致忽略之后的所有声明。

Firefox PHP Include和CSS

2 个答案: