0

現在ホームページを書いています。Webページの上部にバナー画像を表示したい。これが私のhtmlとcssです：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Protect The Environment!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div>
        <img src="http://intranet.kings.edu.hk/~s13977/banner.png"
            id="banner-image" 
            alt=""/>

    </div>
</body>
</html>

スタイル.css

body {
    background:#f8e4e4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:medium;
}

#banner-image {
    height: 106px; 
    width: 582px;
}

ご覧のとおり、画像を html に配置しsrc、正しい URL に設定しました。URLをコピーして確認できます。Visual Studio Designer からは次のように表示されます。 ここに画像の説明を入力

しかし、IEで実行すると、次のようになります。 ここに画像の説明を入力

#banner-imageこれをcssルールに追加しようとしました：

visibility:visible;

しかし、それはまったく機能しません。ページはそのまま！

色々と問題はあると思いますが、divどうしても残しておきたいです。それだけで、物事の管理がはるかに簡単になります。

4

2 に答える 2

1

私のテストでは、HTML の順序付けに違いは見られませんでしたが、徹底的に調べたわけではありません。float クラスを画像またはその周辺に直接追加して<div>も違いはありません。画像はまだ表示されません。
幸いなことに、修正は非常に簡単です。CSS に 3 行追加するだけです。ファイルと問題が解決されます。

ハックも条件もありません。純粋な CSS の検証だけです。

img
{
    position: relative;
}

Internet Explorer の不備に対処することで多くの頭痛の種を抱えていましたが、解決策がいかに簡単であるかを知ったときは、顔を平手打ちしました。相対位置は IE の魔法の修正です。そのため、何か奇妙な癖があり、悲しみを引き起こしている場合は試してみてください。

注：テスト済みで正常に動作しました

于 2015-08-03T06:37:12.913 に答える
0

IE は自動エンコードを行わないため、Internet Explorer は改行文字を認識しません。代わりに次のことを意味します。

"http://intranet.kings.edu.hk/~s13977/banner.png"

IE のイメージ パスでは、次のようになります。

  "http://intranet.kings.edu.hk/%7Es13977/banner.png"

%7E は ~ の URL エンコーディングであり、画像の存在しないパスにつながります。

IE でリンクを機能させるには、encodeUriComponent やその他の明示的なエンコーディング コンポーネントをリンクに使用する必要があります。

于 2015-08-03T06:39:59.073 に答える