單行（一個或兩個字）溢出一個格

我是全新的CSS，所以請原諒我，如果這是一個愚蠢的問題。單行（一個或兩個字）溢出一個格

我已經創建了一個3個嵌入div的寬度爲33.33％的頁腳。出於某種原因，我將每個div放入的文本是div底部的半英寸和半英寸。這讓我瘋狂。有人能解釋爲什麼會發生這種情況嗎？

這裏是我的XHTML：

<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml"> 

<head> 

<meta http-equiv="content-type" 
content="text/xml; charset=utf-8" /> 

<title>www.BLeeOBS.com</title> 

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

</head> 

<body background="images/brick.jpg"> 

<div id="body"> 

<div id="head"> 
<h1>B. Lee Oil Burner Service</h1> 
</div> 

<div id="head_right"> 
<h1></h1> 
</div> 

<div id="left"> 
<h2></h2> 
</div> 

<div id="right"> 
<h2></h2> 
</div> 

<div id="footer"> 

    <div id="footer1"> 
    <h3>Fully Insured</h3> 
    </div> 

    <div id="footer2"> 
    <h3>HIC# PA088378</h3> 
    </div> 

    <div id="footer3"> 
    <h3>©2013</h3> 
    </div> 

</div> 

</div> 

</body> 

</html>

這裏是我的CSS：

#body { 
margin-left: auto; 
margin-right: auto; 
background-image: url("images/bggradient.jpg"); 
text-align: center; 
background-repeat: repeat-x; 
width: 768px; 
height: 1024px; 
} 
#head { 
background-image: url("images/horizontalpipe.png"); 
background-repeat: repeat-x; 
float: left; 
height: 90px; 
width: 678px; 
} 
#head_right { 
background-image: url("images/elbow.png"); 
float: left; 
width: 90px; 
height:90px; 
} 
#left { 
float: left; 
height: 904px; 
width: 678px; 
} 
#right { 
background-image: url("images/verticalpipe.png"); 
background-repeat: repeat-y; 
float: left; 
width: 90px; 
height: 904px; 
} 
#footer { 
background-color: gray; 
color: white; 
height: 30px; 
width: 768px; 
clear: both; 
} 
#footer1 { 
height: 30px; 
float: left; 
width: 33.33%; 
} 
#footer2 { 
height: 20px; 
float: left; 
width: 33.33%; 
} 
#footer3 { 
height: 20px; 
width: 33.33%; 
float: left; 
}

我的頁面在這裏可以查看，看看發生了什麼： http://www.bleeobs.com/bricksswf.html

白色的文字應該是完全在灰盒子裏（我的div），但是你可以看到它已經中途退出了。

另外，我想將文本「B.李油燃燒器服務」的標題稍高一點。設置填充似乎沒有任何幫助。

任何幫助將不勝感激。

來源

2013-03-18 Phil Pthee B. Lee

使用'reset.css'將覆蓋所有由瀏覽器應用的默認CSS – 2013-03-18 04:17:31

我不知道爲什麼，但利潤率正在由「用戶代理樣式」設置我在這裏看到：

inspector

立即修復程序設置

h3 { margin: 0 }

或無論你想要它。根據這Chrome user agent stylesheet overwriting my site style您可能想要查看正確的修復程序。它可能是在你的文檔的頂部（可能是HTML 5），或者可能會破壞CSS的某個地方。

編輯：看起來Adrift對於需要重置的默認瀏覽器樣式可能是正確的。你可以像他建議的那樣使用reset.css。

來源

2013-03-18 03:20:44

非常感謝您的快速回復。似乎現在工作正常。 – 2013-03-18 03:30:18

單行（一個或兩個字）溢出一個格

回答

相關問題