Dreamweaver顯示帶有額外垂直空間的div

<!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顯示帶有額外垂直空間的div

事情是他們不應該。他們應該被塞在紅線的正下方。

現在，它變得很奇怪 - 如果你在任何瀏覽器中查看它，它就是這樣 - 坐在紅線下方（根據需要）。

通常我會說擰它，這是一個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; 
}

來源

2012-04-05 Cole

我不會使用Dreamweaver預覽網頁。根據我的經驗，這是非常不可靠的，很少在預覽中正確呈現網頁。 – 2012-04-05 21:57:07

嗯......在我的經驗中，Dreamweaver在顯示佈局時幾乎總是準確的。我更感興趣的是，如果我用我的html或css導致DW錯誤地顯示佈局，我是否會發生錯誤。 – Cole 2012-04-06 16:14:01

你可以使用W3驗證來確保你的HTML和CSS是好的。 http://validator.w3.org/ – 2012-04-06 16:16:07

Dreamweaver的設計視圖（以及與此有關的實時取景）含有奇怪的CSS呈現錯誤，決不應被視爲「真」的觀點。由於受到工作空間的限制，隱藏的元素圖標的存在或簡單的奇怪，瀏覽器中看起來完美無瑕的設計可能會在設計視圖中「關閉」。改變你的代碼使它在Design View中工作並不是很好的使用時間，並且可能會破壞一些東西。

總之，總是用瀏覽器測試。如果它在那裏看起來不錯，你就全都設置好了。

來源

2012-04-07 03:24:29 JCL1178

我現在仍然不確定爲什麼現在這個問題還沒有出現。但我想我必須接受它，因爲除此之外似乎沒有太多的解釋。謝謝你的幫助。 – Cole 2012-04-07 19:55:30

@Cole它取決於你在頁面上構建元素的方式，以及Webkit最近是否進行了更新以及DW bugginess和一大堆其他因素。不要冒汗，它不是你，它不是你的機器，它不是Dreamweaver的腐敗，它只是Adobe的Adobe。 – JCL1178 2012-04-09 07:56:23

哈哈！很公平。 ;） – Cole 2012-04-10 17:54:13

Dreamweaver顯示帶有額外垂直空間的div

回答

相關問題