Question

它应该是这样的 - 在 IE 上工作 alt text

但在谷歌浏览器：

上没有显示如上所示

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;
}

当我使用Google Chrome开发人员工具检查源代码时，我可以看到css已应用于.ad-title和ad-content，但这些代码不会更改任何内容。

所以我粘贴了我所做的一切。可以帮助我一些人帮助我谷歌Chrome的行为，并且不会在页面上显示“.header”下的文字。

提前致谢。

Answer 1

我正在运行Chrome v.8.0.552.224并且文本显示正确...问题不在您的HTML代码中...

Answer 2

我发现了问题。 ad-title和ad-content以某种方式匹配其他一些不属于我的应用程序的内部css规则。当我将名称更改为h-title和h-content时，他们就开始正常工作了。

当您使用AdBlock扩展名时，请特别注意，因为他们不喜欢ad字。

谷歌Chrome渲染问题，而代码正在IE上工作

2 个答案: