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とブラウザ間の互換性を高めるには、resetを使用します：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

デフォルトのテンプレートとしてHTML5Boilerplateを選択します。これには、すべてのブラウザのデフォルト設定をリセットする NormalizeCSSが付属しています。

HTML5 Boilerplateには、CSSとHTMLのほぼ各行にコメントがあります。これらのコメントにより、使いやすくなります。

フォントサイズが大きすぎるため、行の高さを調整する必要があるため、解決策は要素に設定line-height: 30px;することです。h1h1

于 2012-10-04T10:35:31.550 に答える