如何让我的网站在所有网络浏览器中看起来都一样？我主要使用Firefox，但我是一名新的网页设计师，我无法让我的网站在所有浏览器上看起来都一样。
我尝试用谷歌搜索webkits，jquery，但没有任何解释，它是如何工作的。我还在学习jquery。我试图让我的标题导航栏和容器紧密贴合在一起，就像下面的代码在Firefox中看起来一样。但在Internet Explorer 9中它更远离彼此。此外，我正试图让我的侧面容器更近，但在我看到的两种浏览器中它都不能正常工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template8.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-attachment: fixed; background-repeat: no-repeat;" background="Images/template8 bkg.jpg">
<br />
<br />
<div id="header">
<br />
<br />
<br />
Floating Mountain Enterprise</div>
</div>
<div id="centeredmenu">
<ul>
<li><a href="portfolio.htm" class="active">Tab one</a></li>
<li><a href="portfolio.htm">Tab two</a></li>
<li><a href="portfolio.htm">Tab three</a></li>
<li><a href="portfolio.htm">Tab four</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
</div><!-- end header -->
<div id="left"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>
<div id="right"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>
<div id="container">
<div id="content">
<h1>HEADER ONE</h1> <!-- end h1 -->
YOUR CONTENT HERE!
<h2>Header Two</h2>
<p>More content here. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<br />
<br />
</div> <!-- end content -->
</div> <!-- end container -->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font- size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
#header
{ margin: 0px auto;
text-align:center;
font-size:x-large; font-weight:bold;
width: 810px;
height: 200px;
background: url(Images/template8%20header.jpg);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;
}
#centeredmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 5px;
padding:3px 10px;
background:#FFF;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background: #999;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color: #333;
background:#000;
font-weight:bold;
}
#container
{ margin: 0px auto;
padding-left:15px;
margin-top:27px;
width: 800px;
height: auto;
background: url(Images/container%20bkg.png);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;}
#content
{ margin: 0px auto;
padding-left:15px;
width: 780px;
padding-top:25px;
height: auto;
font-family: "MS UI Gothic";
font-style:oblique;
}
#left * {
background-color: #999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
min-height: 400px;
margin-left:35px;
float: left;
width: 150px;
height: auto;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }
#right *{
background-color:#999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
margin-right:35px;
width: 150px;
min-height: 400px;
float: right;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }
答案 0 :(得分：0)
在每个浏览器上看完全相同听起来有点极端......
主要浏览器上的类似（和流畅）听起来更加真实。
通常认为如果你没有“border-radius”或CSS3的其他很酷的东西在“旧浏览器”（例如IE7或IE8）中工作，那是因为你的访问者必须更新他的浏览器。 ..
所以，设法至少为他提供一个可用的网站/应用程序体验，如果他没有酷炫的CSS3边框半径/不透明度/阴影......效果等等，那真的不是什么大不了的事......如果他没有更新他的浏览器，也许是因为他不太关心那种东西。
现在，如果您希望每个主要浏览器看起来相似，您可以先使用CSS重置（this one是常见的，还有其他一些），然后根据您的需要进行调整。它将重置浏览器用于显示HTML元素的默认设置，这些HTML元素在某些点之间会有所不同。
然后，如果您仍然希望能够使用CSS3效果，您可以使用PIE（或类似）之类的效果来处理旧的IE（6,7和8）。但是，认为它会产生一些性能影响，因为它使用javascript模拟CSS3功能。