0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link href="tester.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="tray">  
    <div class="tray_header">THIS IS A HEADER</div>
    <div class="container">
        <div class="red_line"></div>
        <div class="text_1">THIS IS THE FIRST LINE OF TEXT</div>
        <div class="text_1">THIS IS THE SECOND LINE OF TEXT</div>
    </div>
</div>
</body>
</html>

こんにちは！まず、これはブラウザ関連の質問ではありません。これを Dreamweaver で開くと、テキストの 2 行目と 3 行目が赤い線の下に約 20px ほどずれています。

問題は、そうであってはならないということです。それらは赤い線のすぐ下に隠れているはずです.

ここが変なところです。任意のブラウザーで表示すると、それはまさにそれを行います。(必要に応じて) 赤い線のすぐ下にあります。

通常は、Dreamweaver のバグか何かです。ただし、実際のドキュメント (コードを削除し、他のすべてのアイテムが邪魔にならないように表示できるように、必要最小限のものだけを含めました) には、間に赤い行区切りが付いたテキスト行がさらにあります。レイアウトに垂直方向のスペースがどんどん追加され、ページ上の他の項目が非常に見づらくなるだけです。

私はすべてのルールにゼロパディングとマージンを追加しましたが、おそらくそれには何らかの問題があるかもしれないと考えていましたが、役に立ちませんでした.

興味深いことに、赤い div ラインを削除すると、その下のテキストが本来あるべき場所に表示されます (予想どおり)。

何か案は？

以下は、ドキュメントの CSS です。

body {
width:      100%;
height:     100%;
margin:     0 auto;
padding:    0;
background-color:   #900;
font-family:    Arial, Helvetica, sans-serif;
}

.tray {
width:      290px;
margin:     120px auto 0;
padding:    0;
position:   relative;
}

.tray_header {
width:      290px;
height:     28px;
margin:     0;
padding:    0;
position:   relative;
color:      #FFFFFF;
font-size:  20px;
text-shadow:    0px 2px 2px #000;
text-align: center; 
}

.container {
width:      290px;
margin:     0;
padding:    0;
position:   relative;
}

.red_line {
width:      252px;
height:     2px;
background-color:   #CB0000;
margin:     6px 18px;
padding:    0;
position:   relative;
}

.text_1 {
width:      252px;
margin:     0 0 0 18px;
padding:    0;
position:   relative;
color:      #FFFFFF;
font-size:  15px;   
}
4

1 に答える 1

0

Dreamweaver のデザイン ビュー (およびライブ ビュー) には奇妙な CSS レンダリング バグが含まれており、決して「真の」ビューと見なされるべきではありません。ブラウザーでは問題なく表示されていても、ワークスペースの制約、非表示の要素アイコンの存在、または単なる奇妙さのために、デザイン ビューでは「オフ」に見える場合があります。デザイン ビューで動作するようにコードを変更することは、時間の無駄であり、問​​題を引き起こす可能性があります。

つまり、常にブラウザでテストしてください。そこに問題がなければ、準備は完了です。

于 2012-04-07T03:24:29.730 に答える