1
如何让我的网站在所有网页浏览器中看起来都一样？我主要使用Firefox，但我是一个新的网页设计师，我无法让我的网站在所有浏览器上看起来都一样。浏览器兼容性问题
我尝试了谷歌搜索网页，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; }
欢迎来到世界的浏览器兼容性问题... – Tudor
您应该设计网站在每个浏览器上工作，忘记它在每个浏览器上看起来100％相同，这通常意味着削弱用户体验。此外，而不是JQuery你应该了解CSS。 – nico
我想说一下，“所有网页浏览器”是什么意思？ – lucuma