3

私はcssに少し慣れていないので、私がしていることの多くはコピーまたはグーグルで検索されているので、それがひどく間違っている可能性があるので完全に冷静です。私がやろうとしていることをお話ししましょう。

ヘッダー、フッター、コンテンツを含む標準のcss偽フレームタイプのラッパーに挿入したいphpフォーラムスクリプト（私の小さなフォーラム）があります。現在、フォーラムソフトウェアはsmartyテンプレートエンジンを使用しているので、tplファイル自体を編集しています。dreamweaverで生成したラッパーを問題なく動作させることができたので、これはすべて正常に動作することを知っています。それは私に問題を与えている手作業のものです。

これで、dreamweaverを使用してcssフレームセットを作成できますが、怠惰で、Firefox、Chrome、Safariで機能しない理由を知りたいと思います。私はそれが正しい構文だと確信しています。

まず、IE9で私のサイトにアクセスして、設計どおりに機能していることを確認できます。トラフィックが原因でURLが削除されました-ありがとうございます。

フォーラムのインデックスページのメインのsmartyテーマテンプレート内に配置された個別のヘッダー、コンテンツ、およびフッターラッパーを使用して、990px​​ラッパーに囲まれたフォーラムスクリプトがあります。いいね。心配ない。

Chrome、Firefox、またはSafariで同じサイトを試してみると、ヘッダーとフッターが存在し、意図したとおりに機能していることがわかりますが、「コンテンツ」は100％のページ幅で読み込まれ、絶対位置のcssスタイルシート設定を無視しています。

これが私のCSSです：

/***************STRUCTURE***************************/

* { margin: 0; padding: 0px; }

/* Absolute positioned header for all browsers*/
#header-wrapper {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6em;
}

/* Resets the header position to fixed for real browsers such as Firefox*/
body>div#header-wrapper {
    position:fixed;
}

#headercustom {
    height:6em;
    width:990px;
    margin:0 auto;
}

#content-wrapper {
    padding:6em 0 0 0;
    margin-left:0;
    margin-top:0;
    voice-family: "\"}\""; 
    voice-family:inherit;
    margin-left:16px;
    padding-bottom:60px;
}

body>#content-wrapper {
    margin-left:0;
}

#contentcustom {
    width:990px;
    margin:0 auto;
}

#footer-wrapper {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:60px;
}

body>#footer-wrapper {
    position:fixed;
}

#footercustom {
    width:990px;
    height:60px;
    margin:0 auto;
}

/***************STYLE***************************/

#headercustom,
#footercustom {
    background:#fff;
    color:#000;
}

マークアップは次のとおりです。

<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="content-wrapper">
            <div id="contentcustom">
            content ie forum main script in here
            </div>
        </div>
        <div id="header-wrapper">
            <div id="headercustom">
            Header content here
            </div>
        </div>
        <div id="footer-wrapper">
            <div id="footercustom">
            Footer content here
            </div>
        </div>
    </body>
</html>

注意：マークアップは切り刻まれ、smartyテンプレートに適切に配置されます。これは、参照用としてここに示されています。IEで見栄えがするので、正常に動作している必要があります。そのため、css構文の問題があると確信しています。新しく、ブラウザがそのようなことを解釈する方法の違いを知らない。

Chrome、FF、Safariで私のポジショニングが無視されているのに、IEでは無視されていない理由を理解するためにあなたが私に与えることができるどんな助けもエースでしょう。：D

4

1 に答える 1

1

@サイトで言及したリンク。ページのHTMLソースを表示すると、FF、ChromeなどでHTMLを壊す条件付きコメントがページにあり、ページはIEでのみ機能することがわかります。次のようなコードがあります。

上記のHTMLコードの行は、これが次のように読み取られることを意味します。Internet Explorerでは空白（何もない）他のすべてのブラウザでは

このようなコードは条件付きコメントと呼ばれ、IEでのみ実行され、IE固有のコードを作成する必要がある場合にのみ使用する必要があります。参照： http： //en.wikipedia.org/wiki/Conditional_comment

UIの開発は初めてなので、次のことをお勧めします。

  • ページをHTMLとして保存
  • 適切なタブと間隔でインデントします
  • FirefoxでFirebugなどのツールを使用します（作成したいHTMLおよびCSS編集のプレビューで多くの時間を節約できます）
  • このページをすべてのブラウザで正常に機能させる
  • 次に、テンプレートエンジンでこれを実現するために行った変更を実装します。
于 2013-01-01T06:45:20.187 に答える