2

しばらくの間、このサイトに取り組んできましたが、Mac と PC の Firefox、および Safari で完全に動作します。しかし、IE はサイトをほとんど空白にしています - 何が起こっているのかについてのアイデアはありますか? 回避策はありますか？

よろしくお願いします。

http://www.alliedprintingsolutions.com

http://www.alliedprintingsolutions.com/style.css (スタイルシート)

4

11 に答える 11

14

あなたのhtmlは多くの点で無効です。最初に修正してください。

于 2009-02-27T17:44:30.033 に答える
8

DOCTYPE を追加してください!

最適なクロスブラウザー サポートには、HTML5 または HTML4 Strict ( Transitional ではない) のいずれかをお勧めします。

<!DOCTYPE html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


(ご覧のとおり、HTML5 ははるかに単純で、まだ HTML5 タグを使用していなくても使用できます。)


注: DOCTYPE は、ファイル内で他のすべてのタグの前に配置する必要があり、その前に空白行、タブ、またはスペースを入れないでください。

于 2009-02-27T17:50:51.140 に答える
2

Doctypeを追加してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

編集：doctype宣言はhtmlファイルの最初のものでなければなりません。<html>タグの前にもあります。

于 2009-02-27T17:45:27.363 に答える
0

content_leftとcontent_rightの絶対的な配置では、あまりにも多くの問題が発生しています。両方のコンテンツで「position：absolute」を削除して「float：left」に置き換えれば問題ありません（ラッパー幅を100％に設定）。

于 2009-02-27T18:09:32.407 に答える
0

私は現在FireBugを持っていません（この拡張機能がない場合は入手してください！）しかし、現在の方法で画像を使用することが問題です。

CSSを使用して、サイトのメインコンテンツに「background-image」属性を適用します。例えば：

<style>
.Page
{
    background-image : url(../images/site_bg.png) no-repeat;
    width : 600px; /* Image width here */
    heigth : 500px; /* Image height here */
    padding-top : 15px; /* top text offset here */
    padding-left : 15px; /* left text offset here */
    padding-right : 15px; /* right text offset here */
    padding-bottom : 15px; /* bottom text offset here */
}
</style>

...

<div class = "Page">
 <!-- Content -->
</div>

これははるかにうまく機能し、すべてのブラウザで問題なく機能します:)

コメントに応えて

間違ったことは言いたくありませんが、マウスカーソルで背景画像をクリックしてドラッグできる場合は、background-image属性の代わりに（または組み合わせて）IMGタグを使用して背景を表示していることを意味します。 。私はそれがあなたの問題であることをほぼ保証することができます。すべてのimgタグを削除し、それらをdivとbackground-imageスタイルに置き換えると、問題が解決されます。

私に火の虫がいたら、もっと詳しく調べることができます。

サンプルコードを使用した2番目の編集

不要な画像の使用を削除するのに役立つ可能性のある大まかなコードを次に示します。

<style>
    .Container { margin : auto; width : 600px; /* BG and Header Width here */ }

    .Header
    {
        background-image : url(../images/site_header.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }

    .Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
    {
        width : 60px;
        heigth : 60px;
        display : block;
        float : left;
        margin : 10 20px;
    }

    .Header .Link1:link, .Header .Link1:visited
    {
        background-image : url(../images/link1.jpg);
    }

    .Header .Link2:link, .Header .Link2:visited
    {
        background-image : url(../images/link2.jpg);
    }

    .Page
    {
        background-image : url(../images/site_bg.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }
</style>

...

<div class = "Container">
  <div class = "Header">
    <a href = "link1" id = "Link1"></a>
    <a href = "link2" id = "Link2"></a>
  </div>
  <div class = "Page">
    Content
  </div>
</div>

:)

于 2009-02-27T17:40:58.980 に答える
0

前の空白だけではありません:

    <!DOCTYPE html>

スタイル シート (CSS ファイル) の中括弧の前のスペースも削除します。シンプルなスタイル シートの例 (テキスト エディターの左マージンを想像してください):

    h1{
     font-family:Arial;
     color:purple;
    }
于 2014-03-13T17:05:36.250 に答える
0

firebug のコードをざっと見てみました。コンテンツ div (#wrapperbig) に -1 の z-index があるようです。これは、ブラウザーが非絶対/相対コンテンツを無視する必要があります。これは、IE での奇妙な実装である可能性があります。

また、前述のように、Doctype を追加します。Doctype がない場合、IE はサイトを「互換モード」でレンダリングします。

于 2009-02-27T17:56:07.867 に答える
0

皆様、ご提案ありがとうございます。現在、コンテンツの大部分は (比較的あるべき姿で) IE に表示されていますが、フッター以外は私のページをひどく切り詰めています (笑)。Nelson LaQuet、ヘッダー画像についてあなたが言っていることを理解しました。私はそれらをいじってみる必要があります。私はまだCSSに慣れていないので、イメージマップでそれらをすべて適切に配置することを理解するのは十分に頭痛の種でした。 . Doctype については、あなたが私に言ったように追加しましたが、Firefox でも一部のコンテンツを台無しにしているように見えたので、さらにエラーが発生する必要があることはわかっています。それを取り除くと、物事は再び正常に見えました。背景画像とヘッダー画像を無傷で操作するには、使用される配置方法が唯一の方法であったため、絶対配置を使用した「woowoo's」がかなり必要でした。列の div を正しい場所に配置します。少なくとも私はいくつかの前向きな進歩を遂げましたが、私にはもっと多くの仕事が待ち受けていると思います:/ Firefox でうまく見えるので、修正がもう少し簡単だったらいいのにと思います。ああ、皆さん、助けてくれてありがとう！

シャノン

于 2009-02-27T19:38:52.537 に答える