0

好的，所以我遇到了这个奇怪的错误，我不知道如何继续。

我正在构建一个相当基本的静态网站，只是 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;
}

问题是页面根本不会在 chrome 中呈现。标题栏中的蓝色旋转物一直在旋转，没有任何渲染。

这是踢球者：如果我<p>从该 div 中删除标签并将文本单独放置或放置在另一个 div 中<div>，则 chrome 呈现它没有问题。

到目前为止，该页面在 Firefox 中完美运行。

我不知道是什么导致了这个问题。

编辑：

我已将代码上传到 http://dm.finearts.yorku.ca/~raveesh/test/

4

1 回答 1

0

好的，问题似乎是我使用的 chrome 的开发版本，它在常规频道版本上运行良好。Dev 频道中似乎有很多渲染错误。

干杯，-tR

于 2012-06-02T00:52:29.343 回答