Все браузеры работают по-разному в определении позиций

Question

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

Почему это происходит во всех браузерах?Также пытался использовать положение: абсолютное, но тоже ничего не работает.Может быть, вы можете посмотреть на мой сайт и увидеть, что вы видите правильно или плохо, что я делаю неправильно и почему он работает для меня правильно, используя другую позицию: абсолютную или относительную или все браузеры?просто на других компьютерах браузеры некорректно отображают позиции

Вот мой код, можно ли это исправить, потому что я не понял, где создать контейнер div внутри wrap или где?

html,body{
background-color: #181818;
color: #fff;
height: 100%; 
width: 100%;
overflow-x: hidden; 
overflow-y: auto;
}

*{
padding: 0;
margin: 0;
}

.wrap{
 position:absolute; bottom: -1px; top: 10px;
 margin-left: 4%; *margin-left: 5%;
 margin-right: 4%; *margin-right: 5%;
}

.time{
color: #fff;
font-size: 8pt;
font-weight:bold;
position:absolute; top: -2px; left: 943px; width: 150px;
position:absolute; *top: 3px; *left: 930px; width: 150px;
}

.top{
  width: 1024px;
  height: 30px;
  padding-left: 20px;
  line-height: 25px;
  background: #444;
  background:transparent url('top.png'); background-repeat: repeat-x;
  -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;    
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;

    -webkit-border-top-left-radius: 10px;
    -khtml-border-radius-topleft: 10px; 
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
  }


.header{
  width: 1044px;
  *width: 1024px;
  height: 150px;
  background: #333;
  position:relative;  bottom: 10px;
  background:transparent url('head.png'); background-repeat: repeat-x;
 }

.menu{
  width: 1024px;
  height: 45px;
  background: #474747;
  padding-left: 20px;
  position:relative;  bottom: 11px;
  background:transparent url('menu.png'); background-repeat: repeat-x;
}

 .list {
position:absolute; left: 20px; top: 1px;
}


.content{
  width: 1024px;
  height: 1200px;
  background: #000;
  padding-left: 20px;
  background: #111;
  position:relative;  bottom: 10px;
  }

.aprasymas{
  position:absolute; top: 10px; width: 350px;
 }

 .forma{
  position:absolute; top: -3px; left: 720px;
  position:absolute; *top: 1px; *left: 700px;
  background:transparent url('forma.png'); background-repeat: no-repeat;
  width: 312px; height: 157px;
 }

.imgbox{
 position:absolute; top: 10px;

 }

.photo{
 position:absolute; top: 150px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
 background:transparent url('photo.png'); background-repeat: no-repeat;
}

.photo2{
 position:absolute; top: 280px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
 background:transparent url('photo.png'); background-repeat: no-repeat 
}

.photo3{
 position:absolute; top: 410px; left: 590px; width: 441px; height:141 *top: 60px; *left: 570px;
 background:transparent url('photo.png'); background-repeat: no-repeat;
}

.phototekstas{
 position:relative; top: -15px; left: 90px; width: 300px;
 position:relative; *top: -16px; *left: 85px; *width: 380px;
 color: #fff;
 font-size: 10pt;
 font-size: *8pt;
 padding: 3em;
}



.footer{
  width: 1024px;
  height: 35px;
  background: #333;
  padding-left: 20px;
  position:relative;  bottom: 10px;
  background:transparent url('footer.png'); background-repeat: repeat-x;
-webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px; 
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;

    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-radius-bottomleft: 10px;  
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}

.copyright{
 color: #aaa;
 position:absolute; width: 310px; left: 835px; bottom: 12px;
 position:absolute; width: 310px; *left: 820px; *bottom: 13px;
 font-size: 8pt;
 }

@-moz-document url-prefix() {
 .copyright {
position:absolute; width: 310px; left: 810px; bottom: 12px;
 }
 }

 @-moz-document url-prefix() {
 .phototekstas {
position:relative; top: -18px; left: 90px; width: 300px;
 }
 }

@-moz-document url-prefix() {
 .time {
position:absolute; top: 1px; left: 945px; width: 150px;
 }
 }

 @-moz-document url-prefix() {
 .forma {
position:absolute; top: 1px; left: 720px;
 }
 }

/* will be red only in google chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .time{position:absolute; top: 3px; left: 950px; width: 150px;}
}

/* Opera */
@media not screen and (1) {
.time {
position:absolute; top: -2px; left: 950px; width: 150px;
} /* OP 11 */
}

Это главное, что я позиционирую все шаблоны без тяжелой работы.

.wrap{
 position:absolute; bottom: -1px; top: 10px;
 margin-left: 4%; *margin-left: 5%;
 margin-right: 4%; *margin-right: 5%;
}

Вот моя ссылка: http://mrblackscripts.3owl.com/

Answer 1

Создайте относительно позиционированный «контейнерный» div, затем установите абсолютно позиционированные объекты внутри этого div.

Это абсолютно позиционирует элементы на странице. Однако, это, вероятно, не лучшая практика.