0

私の新しいウェブサイトには、ヘッダー画像に組み込まれたナビゲーションが重なっています。悲しいことに、Internet Explorer (すべてのバージョンが 10 未満) では、ヘッダーとナビゲーションの両方が消えてしまいました。従来の行ごとの HTML でプログラムされたものはすべて正常に動作するようです。ドキュメントタイプの修正を試みましたが、役に立ちませんでした。
私は現在の数字をいじってみましたが、何もありませんでした。

これはヘッダーの CSS です: (Php はランダムな画像を選択します)

Header 
   {
      height: 128px;
      background: url(<?php echo $selectedBg ?>);
      text-indent: -9999px;
      border-bottom: 0px solid #00;
      padding: 0px;
      margin: 0;
   }

そしてナビゲーションのために：（このクラス内で使用される単純なもの）

div.navigation
{
   position: absolute;
   top: 81px; left: 425px;
   height: 47px; width:575px;
   background-color: transparent;
   z-index: 10;
   padding: 0px;
   margin: 0;
   margin-left: 15px;
}

アナウンス CSS:

div.announcement{
    position: absolute;
    top: 140px; left: 425px;
    height: 47px; width:575px;
    z-index: 20;
}

私がする必要があるのは、すべてのブラウザーでこのショーを正しく行うことだけです。助けてくれる人に感謝します。

要求されたコード スニペット:

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

<?php
  $bg = array('images/header1.png', 'images/header2.png', 'images/header3.png', 'images/header4.png', 'images/header5.png', 'images/header6.png', 'images/header7.png', 'images/header8.png' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>BitFracture.com</title>
    <link rel="icon" href="images/site.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/site.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection">
    <link href="*" rel="stylesheet" type="text/css">
    <style type="text/css">
    Header {
        height: 128px;
        background: url(<?php echo $selectedBg ?>);
        text-indent: -9999px;
        border-bottom: 0px solid #00;
        padding: 0px;
        margin: 0;
        }
    </style>
</head>

<body>
<div id="container" class="clearfix">
<div class="navigation"> 
    <a href="#"><img src="images/home.png" onmouseover="this.src='images/homeh.png'" onmouseout="this.src='images/home.png'"></a> 
    <a href="#"><img src="images/repairs.png" onmouseover="this.src='images/repairsh.png'" onmouseout="this.src='images/repairs.png'"></a> 
    <a href="#"><img src="images/articles.png" onmouseover="this.src='images/articlesh.png'" onmouseout="this.src='images/articles.png'"></a> 
    <a href="#"><img src="images/software.png" onmouseover="this.src='images/softwareh.png'" onmouseout="this.src='images/software.png'"></a> 
</div>
<div class="announcement">
    <p> <b>News:</b> Our new site is up and running!</p>
</div>
<header></header>
4

1 に答える 1

0

とは

Header 
   {...}

まさに？タグを使用している場合は、<header>それを削除し、css ヘッダー {} を div.header {} に置き換えて、次のような div タグに適用します。<div class='header'>...</div>

また、#00; #000 にする必要があります。(2 色ではなく 3 色です。異なるブラウザー間で面白い結果が得られる可能性があるためです)。

position:relative; を持つコンテナ要素を使用することもできます。どこからポジショニングを開始するかについてブラウザーを支援するためだけに設定します。

css が付随する html の作業スニペットを投稿できますか?

于 2012-11-29T02:22:16.903 に答える