HTML/CSS IE 不显示标题答案

【问题标题】：HTML/CSS IE not showing headerHTML/CSS IE 不显示标题
【发布时间】：2012-11-29 10:26:57
【问题描述】：

我的新网站具有内置导航功能并重叠标题图像。可悲的是，在 Internet Explorer（所有版本消失了。使用经典的逐行 HTML 编程的所有内容似乎都可以正常工作。我已经尝试过 doc 类型的修复，但无济于事。
我试着弄乱我当前的数字，什么都没有。

这是标题的 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>

【问题讨论】：

可能是您使用了旧版 IE 无法识别的 HTML 标签 (<header>)。

标签： php html css internet-explorer

【解决方案1】：

什么是

Header 
   {...}

真的吗？如果您使用的是 <header> 标记，请将其删除并将 css 标头 {} 替换为 div.header {} 并将其应用于 div 标记，例如 <div class='header'>...</div>

还有 #00;应该是#000；（三种颜色，而不是 2 种颜色，因为这可能会在不同的浏览器中给您带来有趣的结果）。

您可能还想使用具有 position:relative; 的容器元素。设置只是为了帮助浏览器确定从哪里开始定位。

您能否发布一个与 css 一起使用的 html 的工作 sn-p？

【讨论】：

感谢您的帮助。我已将有问题的代码添加到原始问题中。
此外，进行上述更改已从所有浏览器中完全删除了标头。我试图通过在 div.header 中添加标记来使其工作。（更新，成功了！谢谢！）再问一个问题，为什么标题显示在框架之外？
无论如何，谢谢，不知何故，只有在 IE6 上有问题，所以大多数不会有这个错误。 IE7、8、9 和 10 以及 forefox 3-17 和 chrome 都可以工作。
老实说，我真的不担心 IE6 - 许多像 youtube 这样的大型网站已经放弃了对它的支持，我发现唯一仍在使用 IE6 的组织是地方议会：/
这就是我的想法。我唯一担心的是它是 XP 机器的默认浏览器，有些人（出于某种不敬的原因）不更新它。但是，是的，再次感谢。