0

我的网站在 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 对 html 4.01 strict 有效，并且 html 也有效。有谁知道是什么问题？就好像它甚至无法识别我设置的字体。（是的，所有字体都正确安装在我的服务器上）

4

2 回答 2

2

.Davideugenepeterson您的班级的一个属性中有一个错字：

font :normal 18px "Pacifico";

应该：

font: normal 18px "Pacifico";

我敢打赌，IE8 的 CSS 解析器正在读取"font "（带有空格）作为属性名称并且无法识别它。

于 2012-11-19T19:20:23.897 回答
0

您可能正在不同的 PC 上对其进行测试。带有 IE 9 的一个安装了 Pacifico 和 Quaver Sans，另一个没有。

这不是网络字体的工作方式。如果你想使用自定义的，你必须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 文件的字体路径。

如果您没有上述所有格式的字体文件，请使用Font Squirell 的@font-face生成器。如果您想知道是否真的需要所有这些，请查看The New Bulletproof @Font-Face Syntax。

于 2012-11-19T20:51:25.783 回答