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ファイルに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 -->
4

2 に答える 2

2

通常、これが発生した場合、問題はファイルがBOMを使用してUTF-8でエンコードされているためです。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 に答える