Firefox，IE6和歌剧有不同的表现
[英]firefox , IE6 and opera have different things to show
问题描述
my code which I am going to paste here shows different results in FF, IE6 and Opera. 
我要粘贴到此处的代码在FF，IE6和Opera中显示了不同的结果。
The difference between results from FF and Opera is the amount of space shown above (in sky color) and below (in white color) the horizontal menu. FF和Opera的结果之间的差异是水平菜单上方（天空）和下方（白色）显示的空间量。 In the case of IE6, the difference from the result of FF is the amount of space (white color) shown below the horizontal menu. 在IE6的情况下，与FF结果的区别是水平菜单下方显示的空间量（白色）。 How can I get all 3 browsers to show the same result ie the current result from FF ? 如何让所有3个浏览器显示相同的结果，即FF的当前结果？
Html code: 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>
and the css is: 和的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;*/
}
IMAGES should be used in appropriate places. IMAGES应该在适当的地方使用。
Thanks in advance. 提前致谢。 Istiaque Ahmed Bangladesh Istiaque Ahmed孟加拉国
2 个解决方案
解决方案1
0 2011-02-28 20:09:26
Your problem is most likely caused by the browser default stylesheets being all over the place. 您的问题很可能是由于浏览器默认样式表无处不在。 You should consider adding in a good CSS reset before spending a lot of time trying to debug the problem. 在花费大量时间尝试调试问题之前，您应该考虑添加良好的CSS重置。 This one is from the guy that came up with the first universal reset. 这是来自第一个通用重置的人。 It works pretty well. 效果很好。
http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/
解决方案2
0 2011-02-28 21:56:19
Your doctype is incorrect and you are in quirks mode. 您的文档类型不正确，并且您处于怪癖模式。 Change your doctype to this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and see where we stand. 将您的doctype更改为此<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">然后看看我们的立场。
Make sure you follow Firefox or Opera first. 确保首先遵循Firefox或Opera。 Then look to see how IE screws things up before you try and "fix" anything. 然后尝试查看IE如何解决问题，然后再尝试“修复”任何问题。 Never, ever trust IE to do anything right. 永远不要相信IE做正确的事。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.