Какой css или html приводит к тому, что «В настоящее время тестируется …» отображается не в Safari, а в других браузерах?

#html #css #safari

#HTML #css #safari

Вопрос:

По этому URL http://wpbeta.nfshost.com/simplysimple/index.html в центре страницы есть текст «В настоящее время тестируется …», но он не отображается в Safari. Он отображается в Chrome, Firefox и IE.

Знаете ли вы, в чем может заключаться проблема?

Комментарии:

1. Не совсем уверен, но, возможно, что-то связано с color:white в ::selection { } или сумасшедшим шрифтом в body теге? font-family: "ヒラギノ角ゴ Pro W3"

Ответ №1:

Здесь есть несколько проблем.

  • Текст перекрывается фиксированным заголовком со сплошным белым фоном.
  • Это происходит из-за различий в том, как браузеры интерпретируют </br>amp;nbsp; ваши абзацы.
  • Технически так и должно быть <br />amp;nbsp; , но реально вы должны создавать эти пробелы, используя стили CSS, а не разрывы строк.

Попробуйте этот HTML:

 <header id="fixednav">...</header>
<div id="main">
    <h1>Currently testing</h1>
    <p>amp;quot;I believe that one dayamp;hellip;amp;quot;</p>
    <p>-Cool Dude <a href="http://someurl.com" desc="giant mango site">someurl.com</a></p>
</div>
  

с помощью этого CSS:

 #fixednav {
    background-color: #fff;
    display: block;
    height: 100px;
    left: 50%;
    margin-left: -275px;
    position: fixed;
    top: 0;
    width: 550px;
    z-index: 2;
}

#main {
    margin: 100px auto 0 auto;
    width: 550px;
}