谷歌瀏覽器的渲染問題正在研究IE

它應該是這樣的 - 在工作IE alt text 谷歌瀏覽器的渲染問題正在研究IE

但它豈不等於顯示在谷歌瀏覽器像上面：

alt text

讓我貼我一直在使用代碼：

結構：

 
.header 
|_ .h-box-style & .h-box-1 
    |_.ad-title 
    |_.ad-content

HTML代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
    <title>OrderBorder.com -- The way you want the deals for Apple mobile phones </title> 
    <link href="styles/main.css" type="text/css" rel="stylesheet"/> 
    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script> 
    <script src="scripts/cufon-yui.js" type="text/javascript" language="javascript"></script> 

</head> 
<body> 

    <div class="main"> 
     <div class="header"> 
      <div class="h-box-1 h-box-style"> 
       <span class="ad-title">Enjoy Group Savings</span> 
       <div class="ad-content"> 
        Wholesale prices for your Apple gear get lower with larger group size. 
       </div> 
      </div> 
      <div class="h-box-2 h-box-style"> 
       <span class="ad-title">Earn Points</span> 
       <div class="ad-content"> 
        Keep earning points with every purchase you and your friends make. 
       </div> 
      </div> 
      <div class="h-box-3 h-box-style"> 
       <span class="ad-title">Reach Borderline Prices</span> 
       <div class="ad-content"> 
        Eat my dust group!!! Use your points to bring your own prices to the border. 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

和CSS代碼：

body 
{ 
    margin:0px; 
    background-image:url(../images/background.jpg); 
} 
div.main 
{ 
    background-image:url(../images/main_background.jpg); 
    background-repeat:no-repeat; 
    height:950px; 
    width:897px; 
    margin-right:auto; 
    margin-left:auto; 
} 

div.main div.header 
{ 
    width:893px; 
    height:120px; 
    margin-top:120px; 
    float:left; 
} 

div.main div.header div.h-box-style 
{ 
    width:100%; 
    height:100%; 
} 

div.main div.header div.h-box-style span.ad-title 
{ 
    color:Black; 
    font-family:Arial; 
    font-size:20px; 
    width:100%; 
    background-color:Red; 
} 

div.main div.header div.h-box-style div.ad-content 
{ 
    color:Gray; 
    font-family:Arial; 
    font-size:12px; 
    width:100%; 
    height:40px; 
} 

div.main div.header div.h-box-1 
{ 
    float:left; 
    width:220px; 
    height:80px; 
    margin-left:80px; 
    margin-top:20px; 
} 

div.main div.header div.h-box-2 
{ 
    float:left; 
    width:220px; 
    height:80px; 
    margin-left:70px; 
    margin-top:20px; 
} 

div.main div.header div.h-box-3 
{ 
    float:left; 
    width:250px; 
    height:80px; 
    margin-left:30px; 
    margin-top:20px; 
}

當我檢查源代碼與谷歌Chrome開發者工具，我可以看到該css應用於.ad-title和ad-content但這些代碼不會更改任何內容。

所以我粘貼了我所做的一切。有人可以幫我解釋爲什麼谷歌瀏覽器的行爲如此，並且不會在`.header'下的頁面上顯示文字。

在此先感謝。

來源

2010-12-15 Tarik

我發現這個問題。 ad-title和ad-content以某種方式匹配不屬於我的應用程序的一些其他內部CSS規則。當我將名稱更改爲h-title和h-content時，他們開始正常工作。

特別要小心，當您使用AdBlock擴展名，因爲他們不喜歡ad字。

來源

2010-12-15 21:04:36 Tarik

如果你以某種方式遇到這個問題，這是你可能需要的答案。 – Tarik 2010-12-15 23:09:47

我運行Chrome訴8.0.552.224並正確顯示文本...問題是不是在你的HTML代碼...

來源

2010-12-15 20:57:35

我使用相同的版本'8.0.552.224'，但我什麼都看不到。 – Tarik 2010-12-15 21:00:25

谷歌瀏覽器的渲染問題正在研究IE

回答

相關問題