Question

我正在编写我的第一个网站，并没有意识到跨浏览器兼容性会有多么令人沮丧。这是我的网站：http://www.tommaxwell.me。看起来我想在Safari和Chrome中使用它的方式（也许是因为它们是Webkit？），但在Opera和Firefox中，第一个标题和标语之间的间距太大了。我无法弄清楚如何解决这个问题。我读了一些关于CSS Reset的内容，但我不确定如何使用它或它究竟是什么。

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%;

}

Answer 1

您应该使用doctype（html文件中的第一行）。为了更好的CSS和跨浏览器兼容性，请使用reset： http://meyerweb.com/eric/tools/css/reset/

Answer 2

只需将我的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;
}

Answer 3

选择HTML5 Boilerplate作为默认模板，它附带Normalize CSS，可重置所有浏览器的默认设置。

HTML5 Boilerplate几乎对每一行CSS和HTML都有评论，这些评论使其更易于使用。

您的解决方案是将line-height: 30px;设置为h1元素，因为h1字体大小太大，因此您必须调整行高

CSS间距交叉兼容性问题

3 个答案: