1

我正在编写我的第一个站点，但没有意识到跨浏览器兼容性会有多令人沮丧。这是我的网站：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%;

}

4

3 回答 3

2

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

于 2012-10-04T10:36:26.407 回答
1

只需将我的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-04T10:35:20.617 回答
1

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

HTML5 Boilerplate 几乎每行 CSS 和 HTML 都有注释，这些注释使它更易于使用。

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

于 2012-10-04T10:35:31.550 回答