单个标签会导致 chrome 损坏？答案

【问题标题】：Single tag causes chrome to break?单个标签会导致 chrome 损坏？
【发布时间】：2012-05-31 04:19:23
【问题描述】：

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

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

【问题讨论】：

你有活生生的例子吗？没有那些JS文件和图片，没有问题，它可以正常工作。

标签： google-chrome rendering

【解决方案1】：

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

干杯， -tR

【讨论】：