0

さて、この奇妙なバグに遭遇したので、どうすればいいのかわかりません。

私はかなり基本的な静的 Web サイトを構築しています。HTML/CSS と少しのアニメーション用の Jquery だけで、大きなものはありません。

htmlはページ用です

 <!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Quick Metal Finishers</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<header id="topHeader">
    <div id="topName">
        <h1>Quick Metal Finishers</h1>
        <h2>Electroplating | Powder Coating | Metal Painting</h2>
    </div>
    <div id="topContact">
        <h2>Questions?</h2>
        <h1>EMAIL NOW: <strong>info@quickmetalfinishers.com</strong></h1>
    </div>
    <div class="clearfix">&nbsp;</div>
</header>
<hr/>
<nav id="topNav">
<ul>
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">SERVICES</a></li>
    <li><a href="">CONTACT</a></li>
</ul>
</nav>
<div role="main">

<!--Awesome image slidy thingy-->
<div id='coin-slider'>
    <a href="" target="_blank">
        <img src='images/main_img1.jpg' >
        <span>
            Description for img01
        </span>
    </a>
    <a href="">
        <img src='images/main_img2.jpg' >
        <span>
            Description for imgN
        </span>
    </a>
</div>

<!--Next up we have the business blurb-->
<div id="mainCatchy">
<div id="mainCatchyLine">
Choose Us for we are the best this should be slighly long.
</div>
<div id="mainCatchyDescription">
<p>
Fusce varius euismod lorem, nec semper ante ullamcorper condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tortor eget nunc blandit rutrum. Praesent hendrerit ante sed nulla molestie gravida vestibulum.
</p>
<p>
Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Nam quis cursus massa. Dapibus, turpis quis ultricies tincidunt , elit augue facilisis turpis, et suscipit nibh eros eget tortor. Vivamus eleifend dictum.
</p>
</div>
<div class="clearfix">&nbsp;</div>
</div>


</div>
<footer>

</footer>
<script src="js/libs/jquery-1.7.2.min.js"></script>

<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 });
    });
</script>
</body>
</html>

CSSは

html{
    background:hsl(50, 7%, 84%) url(images/bg-body.png) repeat top left;
}

body{
    width:960px;
    margin:4em auto;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.85);
}

#topHeader{
    font-family:Arial, Arial, Helvetica, sans-serif;
    padding:4em 77px 0 77px ;
}

#topName{
    width:auto;
    float:left;
    vertical-align:baseline;
}

#topName h1, #topName h2{
    font-weight:normal;
    font-size:14pt;
    margin:0;
    padding:0;
}
#topName h2{
    font-size:10pt;
    color:#808080;
}

#topContact{
    width:auto;
    float:right;
    margin-top:3pt;
    text-align:right;
}
#topContact h1, #topContact h2{
    font-weight:normal;
    font-size:10pt;
    margin:0;
    padding:0;
    color:#808080;
}
#topContact strong{
    color:#000;
}

/*Top Navigation*/
#topNav{
    font-family:Arial, Arial, Helvetica, sans-serif;
    padding:0 77px 0 77px ;
}
#topNav ul{
    list-style-type:none;
    margin:0 0 1em 0;
}
#topNav li{
    display:inline;
    margin-right:5ex;
}
#topNav a{
    text-decoration:none;
    font-size:11pt;
    color:#808080;
}

#mainCatchy{
    margin:2em 77px 0 77px;
    padding:0;
}

#mainCatchyLine{
    width:240px;
    float:left;
    font-family:'Open Sans', sans-serif;
    font-size:16pt;
    padding:20px 30px;
    color:#333;
}
#mainCatchyDescription{
    float:left;
    width: 506px;   
    font-size:10pt;
    color:#555;
}
/*Generic Styles*/
hr{
    border:none;
    border-top:1px dotted rgba(0,0,0,.2);
    height:0;
    width:98%;
    margin:2em auto 0.7em auto;
}

問題は、ページがクロムでまったくレンダリングされないことです。タイトル バーの青い回転物は、何もレンダリングせずに回転し続けます。

キッカーは次のとおりです。<p>その div からタグを削除し、テキストを単独で、または別の 内に配置すると<div>、クロムはレンダリングに問題はありません。

現在のところ、このページは Firefox で問題なく動作します。

何がこの問題を引き起こしているのかわかりません。

編集：

コードを http://dm.finearts.yorku.ca/~raveesh/test/にアップロードしました

4

1 に答える 1

0

問題は、私が使用していたクロムの開発バージョンのようです。通常のチャンネル バージョンでは問題なく動作します。Dev チャンネルにはレンダリングのバグがたくさんあるようです。

乾杯、-tR

于 2012-06-02T00:52:29.343 に答える