简单的 HTML 网站在 Firefox、Safari 和 IE 中未按预期呈现答案

【问题标题】：Simple HTML website not rendering as expected in Firefox, Safari and IE简单的 HTML 网站在 Firefox、Safari 和 IE 中未按预期呈现
【发布时间】：2023-03-05 03:26:01
【问题描述】：

我使用 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>

【问题讨论】：

您的 HTML 有几个错误。使用验证器。还要检查控制台中的 CSS 错误（例如，没有 font-style: bold;）。某些属性直接覆盖其他属性，例如ul.org 中的list-style-position（也使用无效的all 值）。什么是互联网冒险？
感谢您的回复和清理我的帖子。我将通过控制台和验证器来看看。快速运行，惊讶地看到 4 个错误，尤其是表格错误。有一些功课要做，希望不会回来，但要投票并标记为答案！想想克里斯托弗·哥伦布这样的互联网冒险吧。

标签： html css google-chrome firefox safari

【解决方案1】：

你的代码不好，你可以做很多整理，但要修复错误，请尝试编辑这些类：

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;
}

http://codepen.io/anon/pen/gwXgWr

【讨论】：

感谢您的回复。删除这些行会在 Firefox 中产生更好的表格布局，但在 Chrome 中，似乎有一大块空间我不知道在哪里，这会将表格推到页面的一半。
在#comms 上将位置更改为“绝对”，删除底部并将其更改为“顶部：-20px;”。不过这很hacky，代码有点乱。