我使用HTML和CSS创建了一个简单的网站。
主要使用Chrome开发，我现在看到该网站在Fx，Safari或IE上无法按预期呈现。存在布局问题，即标签/按钮似乎放错了位置。
是否有任何声明要求网站符合Chrome标准？
#wrapper {
/*background-color: #ffff99;*/
width: 1150px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
font-size: 16pt;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
header {
background-color: #a6dd88;
height: 150px;
padding-top: 5px;
position: relative;
padding-bottom: 0px;
}
#company {
position: relative;
left: 250px;
bottom: 115px;
font-size: 35pt;
color: #003300;
}
#iaw {
position: relative;
left: 250px;
bottom: 140px;
color: #2db300;
font-weight: 200;
}
#p1 {
position: relative;
bottom: 170px;
right: 340px;
color: #005e00;
font-weight: 200;
text-align: center;
}
#p2 {
position: relative;
bottom: 255px;
right: 80px;
color: #005e00;
font-weight: 200;
text-align: center;
}
#comms {
float: right;
position: relative;
bottom: 455px;
right: 45px;
}
nav {
width: 510px;
position: relative;
left: 650px;
bottom: 335px;
display: inline-block;
/*background-color: blue;*/
}
a {
text-decoration: none;
}
#content {
background-color: #79bf56;
padding: 10px 50px 10px 50px;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 7px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14.5px;
/*margin: 4px 50px 2px 50px;* <Button space inbetween>*/
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
footer {
background-color: #a6dd88;
position: relative;
}
#footer {
text-align: center;
}
ul {
list-style: none;
text-align: center;
font-size: 10pt;
}
table,
td,
th {
/*border: 1px solid #003300;*/
text-align: center;
}
table {
/*border-collapse: collapse;*/
position: relative;
height: auto;
bottom: 260px;
margin-bottom: -250px;
}
th,
td {
padding: 15px;
}
#ov {
color: #004d00;
}
#ovw {
font-weight: 100;
}
#clsp {
text-align: center;
color: #063b03;
font-size: 18pt;
font-weight: normal;
font-style: italic;
}
#c1 {
display: inline-block;
padding-right: 10px;
color: #e6e600;
font-size: 18pt;
font-weight: normal;
font-style: italic;
}
#c2 {
display: inline-block;
color: #e6e600;
font-size: 18pt;
font-weight: normal;
padding-left: 35px;
font-style: italic;
}
#com {
text-align: center;
color: #063b03;
font-size: 16pt;
font-weight: normal;
font-style: italic;
}
#wwat {
text-align: center;
color: #063b03;
font-size: 20pt;
font-weight: normal;
font-style: italic;
}
#wwa {
text-align: left;
width: auto;
position: relative;
}
.wwa {
width: auto;
position: relative;
left: 145px;
}
ul.org {
text-align: center;
list-style-type: square;
list-style-position: inside;
font-size: 15pt;
list-style-position: all;
font-style: italic;
}
table#rtb {
text-align: center;
position: relative;
bottom: 325px;
left: 10px;
border: none;
}
#rttb {
font-style: bold;
font-weight: 700;
font-style: italic;
}
table#test1 {
text-align: center;
position: relative;
bottom: 270px;
border: 1px solid #003300;
border-collapse:
}
#oc {
text-align: center;
color: #063b03;
font-size: 20pt;
font-weight: bold;
font-style: italic;
}
#cd {
text-align: center;
color: #006600;
}
#ca {
text-align: center;
color: #006600;
position: relative;
left: 145px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Who We Are</title>
<link rel="stylesheet" type="text/css" href="chambers.css">
</head>
<body>
<div id="wrapper">
<header>
<img id="logo" src="http://www.carlogos.org/uploads/car-logos/Jaguar-logo-6.jpg" alt="Company" height="100px" width="130px" />
<a href="Index.html"><h1 id="company">This Text appears correctly</h1></a>
<h6 id="iaw"><em>This Text appears correctly</em></h6>
<h6 id="p1">This Text appears correctly<br> This Text appears correctly</h6>
<h6 id="p2">This Text appears correctlappears correctly<br>
appears correctly</h6>
<h5 id="comms">This Text appears correctly<br>This Text appears correctly<br>E: This Text appears correctly</h5>
<nav>
<a href="index.html">
<button class="button button1">Home</button>
</a>
<a href="WhoWeAre.html">
<button class="button button1">Who We Are</button>
</a>
<a href="WhyUs.html">
<button class="button button1">Why Us?</button>
</a>
<a href="Testimonials.html">
<button class="button button1">Testimonials</button>
</a>
<a href="ContactUs.html">
<button class="button button1">Contact Us</button>
</a>
</nav>
</header>
<div id="content">
<p id="wwat">This Text appears correctly</p>
<table id="rtb">
<tr>
<td>
This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in
FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that
was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly
in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there
that was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly
in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there
that was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly
in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there
that was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly
in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there
that was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly
in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there
that was entered but appears incorrectly in FireFox and Internet Adventure.
<br>
<br>
<p id="wwat">xxxxxxxxx</p>
This is text there that was entered but appears incorrectly in FireFox and Internet Adventure. This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in
FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that was entered but appears incorrectly in FireFox and Internet Adventure.This is text there that
was entered but appears incorrectly in FireFox and Internet Adventure.
</td>
</tr>
</table>
</div>
<div id="footer">
<footer>
<ul>
</br>
<li id="li1"><b><em>This Text appears correctly</em></b>
</li>
<li id="liadd">This Text appears correctlyThis Text appears correctly</li>
<li id="li2"><b>This Text appears correctly<b></li>
<li id="li3"><em>This Text appears correctly</em></li>
</br>
</ul>
</footer>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您的代码不是很好，您可以做很多整理，但要修复错误，请尝试编辑这些类：
table {
/*border-collapse: collapse;*/
position: relative;
height: auto;
/* bottom: 260px; < remove this */
/* margin-bottom: -250px; < remove this */
}
和
table#rtb {
text-align: center;
position: relative;
/* bottom: 325px; < remove this */
left: 10px;
border: none;
}