Question

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

我正在建立一个相当基本的静态网站，只有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中呈现。标题栏中的蓝色旋转状态一直在旋转，没有任何渲染。

以下是踢球者：如果我从该div中删除<p>标记并将文本单独放置或放在另一个<div>内，则Chrome无法渲染它。

截至目前，该页面在firefox中完美运行。

我不知道可能导致此问题的原因。

编辑：

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

Answer 1

好的问题似乎是我正在使用的开发版Chrome，它在常规频道版本上运行良好。 Dev通道中似乎存在大量渲染错误。

干杯， -tR

单个标签导致铬破裂？

1 个答案: