移动分辨率下，网站在移动设备上的外观与在桌面上看起来不一样

Question

我的响应代码存在问题，当我在所有浏览器上打开网页时，它在低分辨率下工作也很好。当我点击PC上的移动分辨率时：

它显示很好但在移动设备上以相同的分辨率被破坏。

就像PC上的320px宽度和手机上的320px不一样。我做了类似的网络，我没有这个问题。 There is link for page 在网络上试用，然后在手机上试用。我的朋友说我需要框架，但我不知道它是如何以及它是什么。

body {
  margin: 0;
}

#galeria1,
#galeria2,
#galeria3,
#galeria4 {
  display: none;
}

#galeria1 {
  display: block;
}

.container {
  max-width: 1323px;
  margin: 0 auto;
  padding: 0 20px;
}

.head {
  height: 400px;
  background: url(img/bg.png) 70% no-repeat;
  background-size: cover;
  padding: 0px;
  max-width: 100%;
}

.container .logo {
  display: inline-block;
}

.logo img {
  margin-top: 40px;
}

.nav-bar {
  display: inline-block;
  float: right;
}

.head .container {
  height: 150px;
}

.nav-bar ul {
  list-style-type: none;
}

.nav-bar li {
  float: left;
  margin-top: 40px;
  margin-right: 50px;
}

.nav-bar li:last-child {
  margin-right: 0px;
}

.nav-bar a {
  color: #fff;
  font-family: "AllerBold";
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding: 0 0 10px 0;
}

.nav-bar a:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 50%;
  left: 25%;
  bottom: 0;
  visibility: hidden;
  background-color: #fff;
  -webkit-transition: all .1s ease;
  transition: all 0.3s ease;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}

.nav-bar a:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.heading {
  font-family: "AllerBold";
  font-size: 36px;
  color: #fff;
  text-align: center;
  height: 205px;
}

.heading span {
  font-family: "Aller";
  font-weight: lighter;
}

.pasik {
  height: 6px;
  background-color: #e2e0e0;
}


/* MAIN */

.sluzby .container {
  max-width: 855px;
  margin: 0 auto;
}

.sluzby {
  height: 354px;
}

.sluzby h3 {
  text-align: center;
}

.sluzby h3 {
  font-family: "AllerBold";
  font-size: 30px;
  color: #424649;
  margin-top: 40px;
  margin-bottom: 50px;
}

.prehlad .container {
  max-width: 800px;
}

.prehlad ul {
  list-style-type: none;
  height: 100px;
  margin-left: -38px;
}

.prehlad li {
  display: block;
  margin-right: 250px;
  float: left;
}

.prehlad li:nth-child(2) {
  margin-left: -18px;
}

.prehlad li:last-child {
  margin-right: 0px;
  margin-top: 15px;
  margin-left: -12px;
}

.popis .container {
  padding: 0 20px;
  max-width: 800px;
}

.popis {
  height: 152px;
}

.popis ul {
  list-style-type: none;
  height: 53px;
  width: 850px;
  padding: 0;
  margin-top: -20px;
}

.popis li {
  float: left;
  margin-right: 113px;
}

.popis li:last-child {
  margin-right: 0px;
}

.popis span {
  font-size: 18px;
  font-family: "AllerBold";
  color: #424649;
  display: block;
}

.popis p {
  max-width: 200px;
  text-align: left;
  font-size: 14px;
  font-family: "Aileron";
  color: #7b7f82;
  margin-top: 0;
}

.kontaktuj {
  height: 220px;
  background-color: #00bdbd;
  text-align: center;
  padding: 0 20px;
}

.kontaktuj .container {
  max-width: 555px;
  margin: 0 auto;
}

.nadpis h3 {
  font-size: 20px;
  color: #fff;
  font-family: "AllerItalic";
  font-weight: lighter;
  margin-top: 50px;
  margin-bottom: 0px;
  display: inline-block;
}

.nadpis h3 span {
  font-family: "AllerBoldItalic";
}

.btn {
  margin-top: 30px;
}

.btn a {
  text-decoration: none;
  border: 2px #fff solid;
  border-radius: 8px;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  font-family: "AileronBold";
  font-weight: bold;
}

.btn a:hover {
  color: #00bdbd;
  background-color: #fff;
}

.omne {
  height: 400px;
  text-align: center;
  margin-top: 100px;
}

.omne .container {
  max-width: 700px;
}

.omne h3 {
  font-family: "AllerBold";
  font-size: 30px;
  color: #424649;
}

.omne h4 img {
  position: absolute;
  top: 1205px;
  left: 50%;
  width: 30px;
  margin-left: -49px;
}

.omne h4 {
  font-family: "AllerBold";
  font-size: 18px;
  color: #424649;
}

.omne p {
  font-size: 14px;
  color: #7b7f82;
  font-family: "AileronItalic";
  line-height: 25px;
  letter-spacing: .8px;
}

.schopnosti {
  height: 245px;
  background-color: #f5f5f5;
  text-align: center;
}

.schopnosti .container {
  height: 245px;
  max-width: 892px;
}

.schopnosti ul {
  list-style-type: none;
}

.schopnosti li {
  float: left;
  margin-top: 25px;
  margin-right: 80px;
}

.schopnosti li:last-child {
  margin-right: 0px;
}

.referencie {
  height: 770px;
}

.container .portfolio-heading {
  max-width: 145px;
  margin: 0 auto;
}

.portfolio-heading {
  margin-top: 100px;
  font-family: "AllerBold";
  font-size: 30px;
  color: #424649;
}

.container .ref-bar {
  max-width: 345px;
  margin: 0 auto;
}

.ref-bar {
  height: 20px;
  list-style-type: none;
  padding-left: 0px;
}

.ref-bar li {
  float: left;
  margin-right: 50px;
}

.ref-bar li:last-child {
  margin-right: 0px;
}

.ref-bar p {
  font-size: 16px;
  font-family: "AileronItalic";
  color: #7b7f82;
  position: relative;
  padding: 0 0 10px 0;
}

.ref-bar p:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 50%;
  left: 25%;
  bottom: 30px;
  visibility: hidden;
  background-color: #00bdbd;
  -webkit-transition: all .1s ease;
  transition: all 0.3s ease;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}

.ref-bar p:hover:after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.ref-bar p:hover {
  color: #00bdbd;
  cursor: pointer;
}

.gallery {
  margin-top: 80px;
  width: 100%;
  height: 548px;
}

.gallery a img {
  max-width: 100%;
  height: auto;
}

.gallery .container {
  max-width: 1070px;
  height: 548px;
}

.photo {
  position: relative;
  float: left;
  text-align: center;
  margin-bottom: 10px;
  margin-right: 10px;
}

.photo:nth-child(3),
.photo:nth-child(6) {
  padding: 0;
  margin-right: 0;
}


/* GALERIA */

.rollover {
  opacity: 1;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  background: url(img/klik.png) center center no-repeat rgba(0, 189, 189, 3);
  cursor: pointer;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 10;
  opacity: 0;
}

.rollover:hover {
  opacity: .7;
  -o-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-box-shadow: 0px 0px 4px #00bdbd;
  -moz-box-shadow: 0px 0px 4px #00bdbd;
  box-shadow: 0px 0px 4px #00bdbd;
}

.zakaznici {
  background-color: #fbfbfb;
  height: 750px;
}

.zakaznici-heading h3 {
  font-family: "AllerBold";
  font-size: 30px;
  color: #424649;
  text-align: center;
  margin-top: 50px;
  display: inline-block;
  height: 50px;
}

.container .zakaznici-heading {
  max-width: 260px;
  margin: 0 auto;
}

.first-coment,
.second-coment {
  max-width: 520px;
  padding: 30px 50px;
  background-color: #f5f5f5;
  font-size: 15px;
  font-family: "AllerItalic";
  color: #7b7f82;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
}

.first span,
.second span {
  float: right;
  color: #00bdbd;
  margin-right: 5px;
}

.first .container {
  max-width: 595px;
  margin: 0 auto;
}

.second .container {
  max-width: 760px;
  margin: 0 auto;
}

.first img {
  position: absolute;
  top: 2800px;
  left: 50%;
  width: 121px;
  height: 121px;
  margin-left: -400px;
}

.second img {
  position: absolute;
  top: 3030px;
  left: 50%;
  margin-left: 320px;
}


/*FOOTER*/

.footer {
  height: 400px;
  background-color: #00bdbd;
}

.footer-heading h3 {
  font-size: 30px;
  font-family: "Aller";
  color: #fff;
  display: inline-block;
  margin-top: 50px;
}

.container .footer-heading {
  max-width: 107px;
  margin: 0 auto;
}

.social-icons .container {
  max-width: 730px;
  margin: 0 auto;
}

.social-icons ul {
  list-style-type: none;
  display: inline-block;
  padding-left: 0px
}

.social-icons li {
  float: left;
  margin-right: 20px;
}

.social {
  font-size: 24px;
  color: #fff;
}

.info .container {
  max-width: 730px;
  margin: 0 auto;
}

.info {
  margin-top: 40px;
}

.info p {
  color: #fff;
  font-size: 14px;
  font-family: "AllerItalic";
  font-weight: 400;
  letter-spacing: 1px;
}

.info span {
  font-weight: bold;
}

.contact-bar {
  margin-top: -200px;
  display: block;
  float: right;
}

.tabulka {
  max-width: 510px;
  background-color: #00bdbd;
  border-radius: 20px;
}

textarea {
  background-color: #00bdbd;
  width: 400px;
  height: 30px;
  border: none;
  text-align: center;
  color: #fff;
  font-family: "AllerItalic";
  font-weight: 400;
  font-size: 17px;
  border-bottom: 2px solid #fff;
  vertical-align: middle;
  margin-top: 30px;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: white;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: white;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: white;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: white;
}

#submit {
  border-radius: 10px;
  text-transform: uppercase;
  font-family: "AllerBold";
  font-weight: 600;
  border-width: 20px;
  border-style: none;
  border-color: none;
  border-image: none;
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  margin-left: 155px;
  margin-top: 20px;
  color: #fff;
  font-size: 15px;
  border: 2px #fff solid;
  padding: 5px 15px;
  background-color: transparent;
}

#submit:hover {
  color: #00bdbd;
  background-color: #fff;
  border: 2px #fff solid;
}

#sucess {
  position: absolute;
  left: 50%;
  top: 3000px;
  color: #fff;
  font-size: 16px;
  font-family: "AllerBold";
}

@media screen and (max-width: 1168px) {
  .second img {
    top: 3145px;
  }
  .first img {
    top: 2915px;
  }
  .referencie .container {
    padding: 0px;
  }
  .gallery .container {
    max-width: 720px;
  }
  .tabulka {
    max-width: 400px;
  }
  .photo:nth-child(3) {
    margin-right: 10px;
  }
}

@media screen and (max-width: 950px) {
  .schopnosti .container {
    max-width: 460px;
  }
  .schopnosti li:nth-child(2) {
    margin-right: 0px;
  }
  .schopnosti {
    height: 470px;
  }
  .first img {
    top: 3155px;
  }
  .second img {
    top: 3386px;
  }
}

@media screen and (max-width: 920px) {
  .first .container,
  .second .container {
    max-width: 623px;
  }
  .first-coment {
    margin-left: 0px;
    margin-top: 115px;
  }
  .first img {
    top: 3510px;
    left: 50%;
    margin-left: -60.5px;
  }
  .second-coment {
    margin-left: 0px;
    margin-top: 160px;
  }
  .second img {
    top: 3858px;
    left: 50%;
    margin-left: -60.5px;
  }
  .omne h4 img {
    top: 1655px;
  }
  .sluzby {
    height: 804px;
  }
  .popis .container {
    max-width: 200px;
  }
  .popis ul {
    width: 200px;
  }
  .popis li {
    margin-right: 0px;
    margin-bottom: 90px;
  }
  .popis p {
    text-align: center;
  }
  #dizajn-img {
    position: absolute;
    left: 50%;
    margin-left: -45px;
    top: 540px;
  }
  #brand-img {
    position: absolute;
    left: 50%;
    margin-left: -38px;
    top: 743px;
  }
  #code-img {
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 953px;
  }
  .popis p {
    margin-top: 7px;
  }
  .prehlad ul {
    margin-left: 0px;
    padding-left: 0px;
  }
  .zakaznici {
    height: 960px;
  }
  .gallery {
    margin-top: 120px;
  }
}

@media screen and (max-width: 737px) {
  .photo {
    margin-right: 0px;
    width: 350px;
  }
  .gallery .container {
    max-width: 350px;
  }
  .gallery {
    height: 1445px;
  }
  .referencie {
    height: 1665px;
  }
  .second img {
    top: 4600px;
  }
  .first img {
    top: 4260px;
  }
  .zakaznici {
    height: 850px;
  }
  .photo:nth-child(3) {
    margin-right: 0;
  }
}

@media screen and (max-width: 713px) {
  .nav-bar {
    display: none;
  }
  .contact-bar {
    margin-top: 0px;
    float: none;
  }
  .footer {
    height: 570px;
  }
  .social-icons li:last-child {
    margin-right: 0px;
  }
  .container .social-icons {
    max-width: 188px;
    margin: 0 auto;
  }
  .info .container {
    max-width: 172px;
    text-align: center;
  }
  .contact-bar .container {
    max-width: 410px;
  }
  textarea {
    max-width: 100%;
  }
  #submit {
    margin-left: 0px;
  }
  #submit {
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }
  .schopnosti {
    height: 925px;
  }
  .second img {
    position: relative;
    top: 0;
    margin-top: 20px;
  }
  .second-coment {
    margin-top: 20px;
  }
  .first img {
    position: relative;
    top: 0;
    margin-top: 20px;
  }
  .first-coment {
    margin-top: 20px;
  }
  .ref-bar li {
    float: none;
    text-align: center;
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .ref-bar {
    height: 80px;
  }
  footer {
    margin-top: 110px;
  }
  .schopnosti .container {
    max-width: 230px;
  }
  .container .ref-bar {
    max-width: 80px;
  }
  .referencie {
    height: 1765px;
  }
}

@media screen and (max-width:443px) {
  .omne {
    height: 450px;
  }
}

@media screen and (max-width:443px) {
  .nadpis h3 {
    font-size: 16px;
  }
}

@media screen and (max-width:430px) {
  .main {
    height: 5270px;
  }
}

@media screen and (max-width:410px) {
  .logo img {
    width: 70%;
  }
  .heading {
    height: 207px;
    ;
  }
  .heading h3 {
    font-size: 1em;
  }
}

<!DOCTYPE HTML SYSTEM>
<html>

<head>
  <title>Bazga</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
</head>

<body>
  <header>
    <div class="head">
      <div class="container">
        <a href="#" class="logo">
          <img src="img/logo.png" alt="">
        </a>
        <div class="nav-bar">
          <ul>
            <li><a href="#">Moje služby</a></li>
            <li><a href="#">O mne</a></li>
            <li><a href="#">Portfólio</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>
      </div>
      <div class="heading">
        <div class="container">
          <h3>Ahojte, <span>volám sa</span> Barbora</h3>
        </div>
      </div>
      <div class="pasik"></div>
    </div>
    </div>
  </header>
  <main class="main">
    <div class="sluzby">
      <div class="container">
        <h3>Moje služby</h3>
        <div class="prehlad">
          <div class="container">
            <ul>
              <li><img src="img/design.png" alt="" id="dizajn-img"></li>
              <li><img src="img/brand.png" alt="" id="brand-img"></li>
              <li><img src="img/code.png" alt="" id="code-img"></li>
            </ul>
          </div>
        </div>

        <div class="popis">
          <div class="container">
            <ul>
              <li>
                <p class="dizajn"><span>Web dizajn</span><strong>Spracovanie návrhov webu, funkčnosť a riešenie vzhľadu. Úlohou web dizajnu je vyvolať prvý dojem - najdôležitelší  dojem</strong></p>
              </li>

              <li>
                <p class="branding"><span>Branding</span><strong>Identifikácia podniku a výrazné odlíšenie od konkurencie. Zahŕňa celkové práce týkajúce sa propagácie a reklamy podniku.</strong></p>
              </li>

              <li>
                <p class="code"><span>Code</span><strong>Programovanie bežných webových aplikácií, ktoré slúžia na označenie častí webu viditeľné bežným zákazníkom</strong></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="kontaktuj">
      <div class="nadpis">
        <div class="container">
          <h3>
            Prajete si mať kvalitný a neodolateľný web vďaka ktorému váš potencionálny zákazník povie <span>„WOW“</span>?
          </h3>
          <div class="btn">
            <a href="#">Kontaktujte ma</a>
          </div>
        </div>
      </div>
    </div>
    <div class="omne">
      <div class="container">
        <h3>O mne</h3>
        <h4>Ahojte! <img src="img/ciarka.png" alt=""></h4>

        <p>
          Volám sa Barbora a som freelacer. Svoju prácu milujem a robím ju od srdca. Pri tvorbe projektu pre klienta dávam všetko do toho, aby bol s výsledkom nadmieru spokojný. Od ranného veku sa venujem umeniu a v posledných rokoch ma grafický dizajn zaujal najviac.
          Preto som sa mu začala venovať naplno a z hobby sa po čase stala práca.
        </p>
        <p>
          Najviac sa sústreďujem na tvorbu webov a celkový branding pre firmy a iné organizácie. Mojím najväčším úspechom je sledovať ako moje finálne práce sa dostanú na verejnosť a podporujú dobré meno podniku.
        </p>
      </div>
    </div>
    <div class="schopnosti">
      <div class="container">
        <ul>
          <li><img src="img/ps.png" alt=""></li>
          <li><img src="img/illustrator.png" alt=""></li>
          <li><img src="img/html.png" alt=""></li>
          <li><img src="img/css.png" alt=""></li>
        </ul>
      </div>
    </div>
    <div class="referencie">
      <div class="container">
        <div class="portfolio-heading">
          <h3 id="gallery">Portfólio</h3>
        </div>
        <ul class="ref-bar">
          <li>
            <p onclick="prva()">Weby</p>
          </li>
          <li>
            <p onclick="druha()">Logá</p>
          </li>
          <li>
            <p onclick="tretia()">Vizitky</p>
          </li>
          <li>
            <p onclick="stvrta()">Branding</p>
          </li>
        </ul>
        <div class="gallery" id="galeria1">
          <div class="container">
            <div id="portfolio">
              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>

              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>

              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>

              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>

              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>

              <div class="photo">
                <a href="img/item01@2x.jpg" title="Neznášam túto galériu"><img src="img/bloom.png" width="350">
                  <div class="rollover"></div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zakaznici">
        <div class="container">
          <div class="zakaznici-heading">
            <h3>Spokojní Zákazníci</h3>
          </div>
        </div>

        <div class="first">
          <div class="container">
            <img src="img/man.png" alt="">
            <div class="first-coment">
              <p>
                „Apple pie I love I love icing cupcake ice cream bonbon sweet roll dragée. I love pie chocolate cake dragée tart bear claw. I love cupcake tiramisu halvah I love bonbon apple pie pudding ice cream. Apple pie I love I love icing cupcake ice cream bonbon
                sweet roll dragée. I love pie chocolate cake dragée tart bear claw.„<br>
                <span>Jakub</span>
              </p>
            </div>
          </div>
        </div>
        <div class="second">
          <div class="container">
            <img src="img/woman.png" alt="">
            <div class="second-coment">
              <p>
                „Apple pie I love I love icing cupcake ice cream bonbon sweet roll dragée. I love pie chocolate cake dragée tart bear claw. I love cupcake tiramisu halvah I love bonbon apple pie pudding ice cream. Apple pie I love I love icing cupcake ice cream bonbon
                sweet roll dragée. I love pie chocolate cake dragée tart bear claw.„<br>
                <span>Edit</span>
              </p>
            </div>
          </div>
        </div>
      </div>
  </main>
  <footer>
    <div class="footer">
      <div class="container">
        <div class="footer-heading">
          <h3>Kontakt</h3>
        </div>
        <div class="social-icons">
          <div class="container">
            <ul>
              <li>
                <a href="#" class="social" id="first">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li>
                <a href="#"><img src="img/instagram-symbol.png" alt=""></a>
              </li>
              <li>
                <a href="#" class="social">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li>
                <a href="#" class="social" id="last">
                  <i class="fa fa-behance"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="info">
          <div class="container">
            <p><span>WEB: </span>BDesign-agency.sk</p>
            <p><span>E-MAIL: </span>BDagency@gmail.com</p>
            <p><span>TEL.:</span>0918 715 080</p>
          </div>
        </div>
        <div class="contact-bar">
          <div class="container">
            <form class="tabulka" method="post" action="index.php">
              <textarea name="name" placeholder="Meno"></textarea>
              <textarea name="email" placeholder="E-mail"></textarea>
              <textarea name="number" placeholder="Správa"></textarea>
              <input id="submit" name="submit" type="submit" value="odoslať">
            </form>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
   </html>

Answer 1

你的doctype让你进入“怪癖模式”。将您置于“标准模式”的正确当前文档类型为<!DOCTYPE html>

来自W3C验证器：

  

错误：预期公共标识符但doctype已结束。在第1行，   第23栏YPE HTML系统＆gt;↩↩      

错误：古怪的doctype。   预计例如。从第1行第1列;到第1行，   第23栏↩

不幸的是，更改为正确的doctype可能会改变您当前的布局，但除了使用正确的布局外别无选择。