Одиночный тэг заставляет хром ломаться?

Итак, я столкнулся с этой странной ошибкой, о которой я не знаю, как продолжить.Одиночный тэг заставляет хром ломаться?

Я создаю довольно простой статический веб-сайт, просто 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>[email protected]</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.

Я понятия не имею, что может вызвать эту проблему.

EDIT:

Я загрузил код в http://dm.finearts.yorku.ca/~raveesh/test/

источник

2012-05-31 Anonymous

У вас есть живой пример? Без этих JS-файлов и изображений нет ничего плохого, он работает правильно. –

Хорошо вопрос, кажется, устр версию хрома, что я использую, она отлично работает на обычной версии канала. Кажется, что в канале Dev есть много ошибок рендеринга.

Приветствия, -TR

источник

2012-06-02 00:52:29

Одиночный тэг заставляет хром ломаться?

ответ

Смежные вопросы