我的问题有点具体,我觉得,基本上,当使用 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 实体。
关于php - Firefox PHP 包含和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10517706/