Проблема рендеринга в Google Chrome, тогда как код работает на IE - PullRequest
Новая
       1

Проблема рендеринга в Google Chrome, тогда как код работает на IE

0 голосов
/ 15 декабря 2010

Это должно выглядеть так - работает на IE alt text

, но на Google Chrome :

* это не так, как показано выше1009 *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, но эти коды ничего не меняют.

Итак, я вставил все, что сделал.Кто-нибудь может мне помочь, почему Google Chrome ведет себя так и не показывает текст на странице под заголовком `.header '.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 16 декабря 2010

Я нашел проблему.ad-title и ad-content так или иначе соответствуют некоторым другим внутренним правилам CSS, которые не принадлежат моему приложению.Когда я изменяю имена на h-title и h-content, они начали работать нормально.

Особенно будьте осторожны, когда вы используете расширение AdBlock, так как им не нравится слово ad.

0 голосов
/ 15 декабря 2010

Я использую Chrome v. 8.0.552.224, и текст отображается правильно ... проблема не в вашем HTML-коде ...

...