Question

嗨我有一个大问题是所有浏览器的定位都不同。其他节目中心的每个模板都没有正确表示。说当一个人打开网站而不是模板时。一方显得少于另一方。我在我的电脑上做了一些工作，它适用于所有浏览器。在这一切之后，我第一次意识到自己做错了什么。我尝试了其他浏览器和字体并更改了屏幕大小。无法解决问题。

为什么所有浏览器都会发生这种情况？也尝试使用position：absolute，但也没有用。也许你可以看看我的网站，看看你看到了什么，或者看错了我做错了什么以及为什么它对我来说正确使用不同的位置：绝对或相对或所有浏览器？只是在其他计算机浏览器上没有正确显示位置

这是我的代码，你可以解决它因为我不明白在哪里创建div容器内部包裹或在哪里？

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中设置绝对定位的对象。

这将绝对定位页面上的元素。但是，这可能不是最好的做法。

所有浏览器在确定位置时都以不同的方式工作

1 个答案: