Question

难以找到这个页面的布局在IE和Firefox中是错误的，完全（据我所知）中性代码。

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

在Mozilla中它太小了。

当我使用该属性时，Mozilla会显示框阴影：

box-shadow

这很奇怪，我以为它用了-moz-box-shadow

以下是正在发生的事情：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 PAGE：

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);  
}

Answer 1

Mozzila和Chrome似乎完全不同地呈现文字（这里的文字来自谷歌的字体API，也许更本地的版本不会有这个问题。我会试验。）

无论如何，指定行高并使用通用字体很重要。

仅指定line-height将修复行之间的间隔，间距为<br /><br />，但该行上的文字数量会有所不同。

Firefox更倾向于将它们压缩在一起，而Google则“正确”地将其压缩，这是可以理解的。来自Google API的字体可能针对-webkit-或其分支进行了优化。

无论哪种方式，这都很烦人，但需要一种解决方法。

<强> TL; DR：

通过更改修复：

font: 14px PT Sans;

到

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

Mozilla Layout＆amp;阴影不工作CSS / HTML

1 个答案: