0

このページのレイアウトがIEとFirefoxの両方で間違っており、完全に（私が知る限り）ニュートラルなコードであることに気づきました。

IEでは、これを含むボックスは大きすぎます。

Mozillaでは小さすぎます。

プロパティを使用すると、Mozillaはボックスシャドウを表示します。

box-shadow

これは非常に奇妙なことですが、-moz-box-shadowを使用していると思いました

何が起こっているのか：http：//i.imgur.com/SvPAP.png（Mozillaボックスのその行はフォトショップからのものです）。

関連するすべてのコードは次のとおりです。

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からのものであり、よりローカルなバージョンではこの問題は発生しない可能性があります。実験します）。

とにかく、行の高さを指定し、共通のフォントを使用することが重要です。

ちょうど指定line-heightすると、行間のギャップが固定され<br /><br />ますが、その行のテキストの量は異なります。

Firefoxはそれをより押しつぶす傾向がありましたが、Googleはそれを「正しく」レンダリングしました。これは理解できることです。GoogleのAPIのフォントは、おそらく-webkit-またはそのフォーク用に最適化されています。

いずれにせよ、これは面倒ですが、必要な回避策です。

TL; DR：

変更により修正：

font: 14px PT Sans;

に

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