0

很难发现这个页面的布局在 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 页面：

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 文本：

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

1 回答 1

0

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

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

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

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

无论哪种方式，这都很烦人，但却是必需的解决方法。

TL;博士：

通过更改修复：

font: 14px PT Sans;

至

font: 14px Arial, Sans-Serif;
    line-height: 14px;
于 2012-12-08T17:15:59.710 回答