Question

我要在此处粘贴的代码在FF，IE6和Opera中显示不同的结果。

FF和Opera的结果之间的差异是水平菜单上方（天空颜色）和下方（白色）显示的空间量。在IE6的情况下，与FF的结果的差异是水平菜单下方显示的空间量（白色）。如何让所有3个浏览器显示相同的结果，即FF的当前结果？

Html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>fffffff</title>
  <link rel="stylesheet" href="css/main.css" type="text/css"/>
  </head>

<body>

  <div id="header">
 <div class="header_inside">
 <div class="logo">
 <img src="img/img_flwr.png" width="224px" height="162px" >
 </div> <!-- end of class logo-->

  <div class="chat">
  <a href="phponline/client.php"  target="_blank"><img src="img/img_flwr.png" width="124px" height="62px"></a>

  </div>


  <div class="clear">
  </div>  


  <div class="name">
   <marquee  behavior="scroll" direction="RIGHT" scrollamount='5' scrolldelay='25' >

      CODE ARROW
 </marquee> 

  </div> -->


     <div id="slides">
    <img src="img/img_1.jpg" alt="Img 1" width="815px" height="268px" />

</div>  


  <div class="clear">
  </div>  
  <br>

</div> <!-- end of class header_inside-->
 </div> <!-- end of header-->


   <div class="menu_h">
   <div class="menu_h_inside">
   <br>
<ul>
<li><a href="index.php" id="home_nav" >Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">News</a></li>
<li><a href="gallery_core.php?page=1" id="image_gallery_nav">Photo Gallery</a></li>
<li><a href="#">Video Gallery</a></li>
<li><a href="#">Career</a></li>


<li><a href="#">Contact</a></li>
</ul>
<br style="clear:left"/>
</div> <!-- end of class menu_h_inside-->
</div>

</body>
</html>

和css是：

/* CSS Document */
*{
padding:0;
margin:0;

}
body{
    width: 1160px;
    /*background:#BFFDC4 !important;*/
    margin-left: 20px;
    /*border:4px solid red;*/
}

#frame {

 /*width: 710px;*/
 width: 1125px;
 /*BORDER:12PX SOLID RED;*/
 /*border:7px solid green;*/
}

#header{
position:relative:
display:block;
/*border:10px solid green;*/
width:1160px;
background:#9DD4FF;

}
.header_inside{


}


body#home a#home_nav,
body#image_gallery a#image_gallery_nav
 {

background-color:#0b75b2 !important;
}


.logo{
position:relative;
left:3px;
top:3px;
float:left;

/*border: 8px solid  #F2AC4E;*/

}
.chat{
position:relative;

float:left;
display:inline-block;
margin-left:100px;
margin-top:15px;
/*border:13px solid red;*/

}

.chat img:hover{




}

.clear{

clear:both;

}
.name{
position:relative;
display:block
clear:both;

width:300px;
height:50px;
MARGIN-TOP:75PX;

background-color:#000000;
color:#FFFF80;

font-size:40px;
}



#slides{
position:relative;
left:300px;
MARGIN-top:-180px;
FLOAT:LEFT;


}


/* horizontal menu_h css begins*/

.menu_h{
  position:relative;
  margin-top:20px;
    width: 1145px;
    /*border:5px solid yellow;*/
     }

  .menu_h ul{
    margin: 0; padding: 0;
    float: left;}

.menu_h ul li{
    display: inline;
 }

.menu_h ul li a{
    float: left; text-decoration: none;
    color: white;
    padding: 10.5px 44.6px;
    /*background-color: #333; EDITED BY ME */ 
  background-color:#C7A781;
   border-right: 1px solid #FFFFFF;

  }

.menu_h ul li a:visited{

    color: white;}

.menu_h ul li a:hover, .menu_h ul li .current{
    color: #fff;
    background-color:#0b75b2;}


  /* horizontal menu_h css ended */


.menu_h_inside{
    margin-left:1px;
    /*margin-top:7px;*/
}

应在适当的地方使用图片。

提前致谢。 Istiaque Ahmed 孟加拉

Answer 1

您的问题很可能是因为浏览器默认样式表遍布整个地方。在花费大量时间尝试调试问题之前，您应该考虑添加一个好的CSS重置。这个是来自第一个通用复位的人。它运作得很好。

http://meyerweb.com/eric/tools/css/reset/

Answer 2

你的doctype不正确，你处于怪癖模式。将您的文档类型更改为此<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，并查看我们的立场。

确保首先关注Firefox或Opera。然后看看在你尝试“修复”任何东西之前，IE如何搞砸了。永远不要相信IE做任何事情。

firefox，IE6和opera有不同的东西要展示

2 个答案: