所有瀏覽器在確定職位時都以不同的方式工作

嗨，我有一個大問題，那就是所有瀏覽器的定位都不一樣。其他演出中心的每個模板都無法正確表示。說一個人打開網站而不是模板。一側比另一側少顯示。我在我的電腦上做了一些工作，它在所有瀏覽器中都能正常工作。我不明白我第一次做錯了什麼，畢竟這是如此。我嘗試了其他瀏覽器和字體並更改屏幕大小。不解決問題。所有瀏覽器在確定職位時都以不同的方式工作

爲什麼所有瀏覽器都發生這種情況？也嘗試使用位置：絕對，但沒有任何作品。也許你可以看看我的網站，看看你看到了什麼我正在做的錯誤，爲什麼它正確地使用不同的位置：絕對或相對或所有瀏覽器，看到你看到它的正確或壞的東西？只是在其他電腦瀏覽器不顯示正確的位置

這裏是我的代碼，你可以修復它因爲我不明白什麼地方創建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/

來源

2012-03-28 Polas Anderson

創建一個相對定位的「容器」 DIV，然後設置div中絕對定位的對象。

這將絕對定位頁面上的元素。但是，這可能不是最佳做法。

來源

2012-03-28 13:47:13

我不明白這裏是我的css代碼。 – 2012-03-28 13:52:45

例如：

– 2012-03-28 13:57:30

一切brokeb以上;（ – 2012-03-28 15:10:09

所有瀏覽器在確定職位時都以不同的方式工作

回答

相關問題