Блог

Главная - Вопросы по программированию - Простой HTML-сайт не отображается должным образом в Firefox, Safari и IE

Простой HTML-сайт не отображается должным образом в Firefox, Safari и IE

#html #css #google-chrome #firefox #safari

#HTML #css #google-chrome #firefox #safari

Вопрос:

Я создал простой веб-сайт, используя 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>

Комментарии:

1. В вашем HTML есть несколько ошибок. Используйте средство проверки. Также проверьте ошибки CSS в консоли (например, их нет font-style: bold; ). Некоторые свойства напрямую переопределяют другие, такие как list-style-position in ul.org (который также использует недопустимое all значение). Также что такое интернет-приключение?

2. Спасибо за ваш ответ и за прояснение моего сообщения. Я посмотрю через консоль и валидатор. Быстрый запуск, был удивлен, увидев ошибки 4 и, в частности, ошибку таблицы. Нужно сделать домашнее задание, надеюсь, оно не вернется, но проголосовать и отметить как ответ! Подумайте об интернет-приключении, таком как Христофор Колумб.

Ответ №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

Комментарии:

1. Спасибо за ваш ответ. Удаление этих строк привело к гораздо лучшему расположению таблиц в Firefox, но в Chrome, похоже, есть кусок пространства, который я не могу определить, где, который перемещает таблицу на полпути вниз по странице.

2. В #comms измените позицию на ‘absolute’, удалите bottom и измените его на «top: -20px;». Хотя это очень сложно, код немного запутан.