IE 8的CSS問題

我的網站在IE9上看起來不錯，但在IE8上看起來不錯。 Davideugenepeterson類和id不起作用。任何人都可以指出問題來自哪裏？這裏是我的CSS：IE 8的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嚴格和HTML是有效的爲好。任何人都知道問題是什麼？這就像它甚至不認識我的設置字體。（是所有的字體被正確安裝在我的服務器上）

來源

2012-11-19 David Eugene Peterson

考慮提供小樣本...我懷疑你需要所有的CSS和HTML來顯示問題。比發現問題更容易。 –

剛剛謝謝@AlexeiLevenkov –

您可能正在測試它在不同的PC上。與IE 9的那個安裝了Pacifico和Quaver Sans，另一個沒有安裝。

這不是Web字體的工作方式。如果你想使用一個自定義的，你必須在CSS定義font-family：

@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() containes相對於CSS文件中的字體路徑。

如果您沒有上述所有格式的字體文件，請使用Font Squirell's @font-face generator。如果你想知道你是否真的需要全部檢查The New Bulletproof @Font-Face Syntax。

來源

2012-11-19 20:51:25 Pavlo

有沒有在你的.Davideugenepeterson類的屬性的一個錯字：

font :normal 18px "Pacifico";

應該是：

font: normal 18px "Pacifico";

我的賭注是IE8的CSS解析器正在讀取"font "（使用空格）作爲屬性名稱而不識別它。

來源

2012-11-19 19:20:23 daGUY

回答

相關問題