爲什麼它在不同的瀏覽器中是這樣的？

Question

截圖：

• 預覽在Chrome

• 預覽在Firefox

我怎樣才能解決這個問題？這裏是我的CSS代碼：

BODY 
{ 
    margin: 0; 
    padding: 0; 
    background-image:url('images/bg.jpg'); 
} 

@font-face { 
    font-family: "District"; 
    font-style: normal; 
    font-weight: 1; 
    src: url("DisTh__.otf"); 
} 

#logo 
{ 
    padding-top: 0; 
    line-height: 0%; 
    font-family: District; 
    font-size: 36px; 
    color:#d8d8d8; 
    text-decoration: none; 
    text-shadow: #000000 1px 1px 1px; 
    float:left; 
} 

#main-container 
{ 
    width:980px; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top: 0px; 
    border-style:solid; 
    border-width:2px; 
} 

#nav 
{ 
    float: right; 
    Width: 500px; 
    padding-top:26px; 

} 

#nav li 
{ 
    line-height: 22px; 
    font-family: District; 
    font-size: 18px; 
    text-align:center; 
    color:#d8d8d8; 
    list-style-position:inside; 
    list-style-type: none; 
    float: right; 
    padding-right: 30px; 
} 

#nav li a 
{ 
    text-decoration:none; 
    text-shadow: #000000 1px 1px 1px; 
    color:#d8d8d8; 
} 

#nav li a:hover 
{ 
    text-decoration:none; 
    text-shadow: #000000 2px 2px 1px; 
} 

#middle-container 
{ 
    width:980px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top: -4px; 
    background-image:url(images/box-bg.jpg); 
    background-repeat:no-repeat; 
} 
#clear 
{ 
    clear:both; 
} 

/* SLIDER CSS */ 

#slideshow { 
    margin: auto; 
    width:980px; 
    height:450px; 
    background:transparent url(images/box-bg.jpg) no-repeat 0 0; 
    position:relative; 
} 
#slideshow #slidesContainer { 
    width:568px; 
    height:225px; 
    overflow:auto; /* allow scrollbar */ 
    position:relative; 
    top: 47px; 
} 
#slideshow #slidesContainer .slide { 
    width:568px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ 
    height:263px; 
} 

/** 
* Slideshow controls style rules. 
*/ 
.control { 
    display:block; 
    width:39px; 
    height:263px; 
    text-indent:-10000px; 
    position:absolute; 
    cursor: pointer; 
} 
#leftControl { 
    top:0; 
    left:0; 
    background:transparent url(images/Lprev-button.png) no-repeat 0 0; 
    margin-top:116px; 
    margin-left: 85px; 
} 
#rightControl { 
    top:0; 
    right:0; 
    background:transparent url(images/Rnext-button.png) no-repeat 0 0; 
    margin-top:116px; 
    margin-right: 85px; 
} 
/* END SLIDER */ 

Answer 1

這個答案不會直接解決問題，但它將有助於避免這樣的問題發生。您應該使用reset.css，這會將所有瀏覽器重置爲相同的基本樣式。埃裏克邁耶斯特別好 - http://meyerweb.com/eric/tools/css/reset/。

使用這並不意味着你永遠不會使用任何黑客，但它是一個偉大的開始。