Question

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

事情是他们不应该。它们应该藏在红线下面。

现在这就变得奇怪了 - 如果你在任何浏览器中查看它就是这样 - 坐在红线下面（根据需要）。

通常情况下，我只是说搞砸它，这是一个Dreamweaver的bug或其他东西。然而，在真实文档中（我已经删除了代码并且仅包含了必需品，因此可以在没有其他所有项目的情况下查看它们），在它们之间有更多的文本行，其中包含红线分隔符，因此他们只是不断为布局添加越来越多的垂直空间，并且很难在页面上看到其他项目。

我已经完成并且在所有规则上添加了零填充和边距，认为可能存在某些问题，但无济于事。

有趣的是，如果你删除红色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;   
}

Answer 1

Dreamweaver的设计视图（以及实时视图）包含奇怪的CSS渲染错误，绝不应被视为“真实”视图。由于受限的工作空间，隐藏元素图标的存在，或者只是简单的怪异，浏览器中看起来完美无缺的东西可能在“设计视图”中看起来“关闭”。改变你的代码以使其在设计视图中工作不是很好地利用时间并且可能会破坏事物。

简而言之，始终使用浏览器进行测试。如果那里看起来不错，那么你们都已经确定了。

Dreamweaver显示具有额外垂直空间的div

1 个答案: