CSS間距交叉兼容性問題

我編碼我的第一個網站，並沒有實現跨瀏覽器的兼容性會令人煩心。這是我的網站：http://www.tommaxwell.me。它看起來我想要的方式在Safari和Chrome（也許是因爲他們的Webkit？），但在Opera和Firefox，第一頭和標語之間的間距是太多。我無法弄清楚如何解決這個問題。我讀了一些關於CSS Reset的內容，但我不確定如何使用它，或者確切地說它是什麼。CSS間距交叉兼容性問題

CSS：

body { 
background-image:url(209241_2453996366505_1946848896_o.gif); 
background-position:center center; 
background-attachment:fixed; 
-o-background-size: 100% 100%, auto; 
-moz-background-size: 100% 100%, auto; 
-webkit-background-size: 100% 100%, auto; 
background-size: 100% 100%, auto; 

padding:0; 
margin:0; 



} 

@font-face { 
font-family: 'klavika_rgregular'; 
src: url('klavika-regular-webfont.eot'); 
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('klavika-regular-webfont.woff') format('woff'), 
    url('klavika-regular-webfont.ttf') format('truetype'), 
    url('klavika-regular-webfont.svg#klavika_rgregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 



@font-face { 
font-family: 'klavika_mediummedium'; 
src: url('klavikamedium-osf-webfont.eot'); 
src: url('klavikamedium-osf-webfont.eot?#iefix') format('embedded-opentype'), 
    url('klavikamedium-osf-webfont.woff') format('woff'), 
    url('klavikamedium-osf-webfont.ttf') format('truetype'), 
    url('klavikamedium-osf-webfont.svg#klavika_mediummedium') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 


h1 { 
text-align: center; 
margin-top: 10%; 
font-family: klavika_mediummedium; 
color:#FFFFFF; 
font-size: 6.250em; 
font-weight: 400; 
} 


p { 
position: relative; 
top:-8%; 
text-align: center; 
font-family: klavika_rgregular; 
color:#FFFFFF; 
font-size: 1.875em; 
font-weight: 400; 
} 




ul { 
position: relative; 
list-style-type: none; 
margin-top: 5%; 
margin-left: 37%; 
font-family: klavika_mediummedium; 
} 


ul li { 
font-size: 2.500em; 
font-weight: 400; 
float: left; 
padding-right: 3%;

}

來源

2012-10-04 Tom Maxwell

你應該寫你的HTML標記以適當的方式下面很多人回答你關於如何編寫正確的HTML標記和CSS。所以請閱讀那些能夠幫助你的文章....... –

選擇HTML5 Boilerplate爲默認模板，它C與Normalize CSS omes重置所有瀏覽器的默認設置。

HTML5的樣板，對每個幾乎CSS和HTML的行註釋，這些註釋使得它更易於使用。

您的解決方案是在設置line-height: 30px;到h1元素，因爲h1具有過大的字體大小，所以你必須調整行高

來源

2012-10-04 10:35:31 Dipak

你的解決方案很有效，我會檢查HTML5 Boilerplate。謝謝！ –

只需更換我的p tag類到你的CSS： -

CSS

p { 
    color: #FFFFFF; 
    font-family: klavika_rgregular; 
    font-size: 1.875em; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
}

來源

2012-10-04 10:35:20

您應該使用DOCTYPE（HTML文件中第一行）。爲了更好的CSS和跨瀏覽器兼容使用復位： http://meyerweb.com/eric/tools/css/reset/

來源

2012-10-04 10:36:26

CSS間距交叉兼容性問題

回答

相關問題