什麼CSS或HTML導致「目前，測試...」不會顯示在Safari中，但在其他瀏覽器？

Question

在這個網址http://wpbeta.nfshost.com/simplysimple/index.html上，在頁面中央有文字「Currently，testing ...」，但它不會在Safari中顯示。它顯示在Chrome，Firefox和IE中。

你知道這個問題可能是什麼嗎？

Answer 1

這裏有幾個問題。

• 文本被固定標題與純白色背景重疊。
• 這是因爲瀏覽器在您的段落中解釋</br>&nbsp;的方式不同所致。
• 從技術上講，這些應該是<br />&nbsp;，但實際上你應該使用CSS樣式創建空白，而不是換行符。

試試這個HTML：

<header id="fixednav">...</header> 
<div id="main"> 
    <h1>Currently testing</h1> 
    <p>&quot;I believe that one day&hellip;&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; 
}