2

我的问题是我觉得有点具体,基本上我在使用 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 文件使用包含语句的实例中(静态 html 文件完美运行) .

我的 index.php 文件有以下代码:

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

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

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

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

提前致谢。

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

索引.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>

页脚.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 -->
4

2 回答 2

2

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

大多数编辑器(除了记事本)允许您编码为“没有 BOM 的 UTF-8”,因此您应该尽可能使用该选项。

如果不是,请不要使用 UTF-8。就我个人而言,我仍然在 ISO-8859-1 中做我所有的事情,如果我需要一个 Unicode 字符,我会使用一个 HTML 实体。

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

于 2012-05-09T14:23:15.847 回答
1

您的问题源于您的样式表第 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?这会导致之后的所有声明都被忽略。

于 2012-05-09T14:38:00.903 回答