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 中打开它时，第二行和第三行文本会在红线下方向下移动大约 20 像素左右。

问题是他们不应该。它们应该藏在红线的正下方。

现在这就是它变得奇怪的地方——如果你在任何浏览器中查看它，它就是这样做的——位于红线下方（根据需要）。

通常我只会说搞砸了，它是 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 回答