Mozilla佈局和陰影不工作CSS/HTML

爲了找出這個頁面的佈局，在IE和Firefox中都是錯誤的，完全（據我所知）中性代碼是錯誤的。Mozilla佈局和陰影不工作CSS/HTML

在IE中，包含這個下一個的框太大了。

在Mozilla中它太小了。

Mozilla的顯示框的陰影，當我使用屬性：

box-shadow

這是非常奇怪的，我還以爲是用-moz-箱陰影

這裏的是怎麼回事：http://i.imgur.com/SvPAP.png（即行Mozilla盒子來自photoshop）。

這裏的所有相關代碼：

HTML：

<!DOCTYPE hmtl> 

<html> 

<head> 

    <link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/> 
    <link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/> 
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' /> 
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' /> 

<head> 

<body> 
    <div class="divCentre"> 
     <div class="divTitleCon"> 
      <p class="titleText">What Is This?</p> 
     </div> 
     <div class="divContentCon"> 
      <p class="contentText"> 

       TEXT 

       <br /><br /> 

       TEXT 

       <br /><br /> 

       TEXT 

       <br /><br /> 

       <span class="footerText"> 

        TEXT 

       </span> 

      </p> 
     </div> 
    </div> 
</body> 

</html>

CSS頁面：

html, body 
{ 
    margin: 0; 
    padding: 0; 
} 
body 
{ 
    background-color: rgb(241, 250, 253); 
} 
.divCentre 
{ 
    position:absolute; 

    top: -25%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 

    width: 380px; 
    height: 230px; 

    padding: 20px; 

    overflow: hidden; 

    border: 1px solid rgba(200, 200, 200, 1); /* BORDER */ 

    background-color: rgba(255, 255, 255, 1); /* BACKGROUND */ 

    color: rgb(100, 100, 100); 


    -moz-box-shadow: 
       0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */ 
      inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
    -webkit-box-shadow: 
       0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */ 
      inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
} 
.divTitleCon 
{ 
    position: relative; 

    width: 100%; 
    height: 15%; 
} 
.divContentCon 
{ 
    position: relative; 

    margin-top: 20px; 

    width: 100%; 
    height: auto; 
    max-height: 80%; 

    word-wrap: break-word; 

    overflow: hidden; 
}

CSS TEXT：

p 
{ 
    margin: 0; 
    padding: 0; 
} 

.titleText 
{ 
    font: 32px Arvo; 
    text-shadow: 0px 1px rgb(255,255,255); 
} 

.contentText 
{ 
    font: 14px PT Sans; 
    color: rgb(150, 150, 150); 
    text-shadow: 0px 1px rgb(255,255,255); 
} 

.footerText 
{ 
    color: rgb(200, 200, 200); 
}

來源

2012-12-08 ツ.jp

Mozzila和Chrome看起來完全不同（這裏所討論的文本來自Google的字體API，也許更多的本地版本不會有這個問題。我會試驗）。

無論如何，指定行高並使用通用字體很重要。

僅指定line-height將修正行之間的間隔，間隔<br /><br />，但是該行上的文本數量會有所不同。

Firefox更傾向於將它擠壓在一起，而Google則將其「正確」渲染出來，這是可以理解的。谷歌API的字體可能針對-webkit-或其分支進行了優化。

無論哪種方式，這是煩人的，但一個必需的解決方法。

TL; DR：

修正通過改變：

font: 14px PT Sans;

到

font: 14px Arial, Sans-Serif; 
    line-height: 14px;

來源

2012-12-08 17:15:59

Mozilla佈局和陰影不工作CSS/HTML

回答

相關問題