0

私のWebサイトはIE9で正常に表示されていますが、IE8では正常に表示されていません。DavideugenepetersonのクラスとIDが機能していません。問題がどこから来ているのか誰かが指摘できますか？これが私のCSSです：

   @charset "utf-8";

body
{ min-width:839px;
  max-width:none;
  margin-left:0;
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  background-color:#fff; }

#Container
{ margin-left:auto;
  margin-right:auto;
  position:relative;
  overflow:auto; }

  #Banner
{ position:relative;
  background-color:#000;
  height:37px;
  width:auto;
  z-index:1; }

    #Theportfolioof
{
  position:absolute;
  text-align:center;
  width:170px;
  height:37px;
  left:-192px;
  top:9.4px;
  bottom:0;
  right:0px; }

.Theportfolioof
{ white-space:nowrap;
  color:#888888;
  text-align:center;
  letter-spacing:1.3px;
  text-transform:uppercase;
  word-spacing:5px;
  line-height:3px;
  font:normal 21px "Quaver Sans";
  font-weight:100;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
  z-index:1; }

 #Davideugenepeterson
{ position:absolute;
  text-align:center;
  width:170px;
  height:37px;
  left:182px;
  top:1px;
  bottom:0px;
  right:0px; }

.Davideugenepeterson
{ white-space:nowrap;
  color:#FFF;
  text-align:center;
  letter-spacing:0.8px;
  text-transform:capitalize;
  word-spacing:4px;
  line-height:3px;
  font :normal 18px "Pacifico";
  font-size:18px;
  font-weight:100;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
  z-index:1; }




#Logo
{ width:117px;
  height:117px;
  background-image:url(images/logo.png);
  background-repeat:no-repeat;
  position:absolute;
  left:0;
  top:37px;
  bottom:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  z-index:1; }

これが私のHTMLです：

    <body>
    <div id="Container">
    <div id="Banner"><div id="Theportfolioof" class="Theportfolioof">the portfolio of</div><div id="Davideugenepeterson" class="Davideugenepeterson">david eugene peterson</div></div>
    <div id="Logo"></div>
    </div>
  </div>
    </div>
    </body>

これがIE9ブラウザのスクリーンショットです：これはそれがどのように見えるべきかですIE9

そして、これがIE8との違いです。 IE8

W3Cで検証しました。cssはhtml4.01strictで有効であり、htmlも有効です。誰もが問題が何であるか知っていますか？設定したフォントさえ認識していないようです。（はい、すべてのフォントがサーバーに正しくインストールされています）

4

2 に答える 2

2

.Davideugenepetersonクラスのプロパティの1つにタイプミスがあります。

font :normal 18px "Pacifico";

する必要があります：

font: normal 18px "Pacifico";

私の賭けは、IE8のCSSパーサーが"font "プロパティ名として（スペースを使用して）読み取っていて、それを認識していないことです。

于 2012-11-19T19:20:23.897 に答える
0

おそらく別のPCでテストしています。IE 9を搭載したものには、PacificoとQuaver Sansがインストールされていますが、もう1つはインストールされていません。

これは、Webフォントの動作方法ではありません。font-familyカスタムのものを使用する場合は、CSSで次のように定義する必要があります。

@font-face {
  font-family: 'MyFontFamily';
  src: url('fonts/myfont-webfont.eot?#iefix') format('embedded-opentype'), 
       url('fonts/myfont-webfont.woff') format('woff'), 
       url('fonts/myfont-webfont.ttf') format('truetype'),
       url('fonts/myfont-webfont.svg#svgFontName') format('svg');
}

ここurl()には、CSSファイルに関連するフォントへのパスが含まれています。

上記のすべての形式のフォントファイルがない場合は、FontSquirellの@font-faceジェネレーターを使用してください。あなたが本当にそれらすべてが必要なのか疑問に思うなら、新しい防弾@Font-FaceSyntaxをチェックしてください。

于 2012-11-19T20:51:25.783 に答える