php - Firefox PHP 包含和 CSS

标签 php html css include

我的问题有点具体,我觉得,基本上,当使用 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 文件)使用 include 语句的实例中完美运行)。

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

最佳答案

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

大多数编辑器(除了记事本)都允许您编码为“UTF-8 without BOM”,因此如果可以的话,您应该使用该选项。

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

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

关于php - Firefox PHP 包含和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10517706/

相关文章:

php - TYPO3 v10LTS - 错误 - 核心 : Exception handler (WEB): Uncaught TYPO3 Exception: #1573385431: RSS URL could not be fetched | RuntimeException

php - CakePHP 3.0 在模板中回显 css 文件的内容

php - 将 PHP 变量传递给 Javascript 函数(特定代码错误)

html - 如何将图像固定到另一个图像 css

java - 用于 html5 音频和视频的volumeslider

php - 当点击一个链接到一个新的 .php 页面时,该链接不起作用

javascript - 用于评论的可编辑 div

CSS bootstrap 元素没有很好地水平对齐

html - WordPress CSS - 如何调整大小并使其成为圆形图像

javascript - 当输入被禁用时如何更改 Material UI TextField 的输入颜色 [MUI v : 5. 0.8]