非常不尋常的邊距總是出現在Internet Explorer [CSS]

Question

只有在Internet Explorer中才會出現這種情況：我在字段集下面獲得了額外的邊距（19個像素），我似乎無法看到爲什麼，無論我嘗試！試一試，看看http://theshrop.com/d/call_us_or_call_in.php。爲了幫助我添加了網格和一些背景顏色。該字段應該有一個1.125em的底部邊距，它在Safari，Firefox等中有效。它在Internet Explorer中有額外的19個像素？我已經給了fieldset一個寬度和高度，所以它已經佈局，希望這有助於。

body{ 
color:#171717; 
font:1em/1.125em Georgia,serif; 
margin:0; 
padding:0; 
} 
/* */ 
fieldset{ 
background:fuchsia; 
border:0 solid green; 
border-width:0.0625em 0; 
height:19.125em; 
margin:0 0 1.125em; 
padding:3.3125em 1.125em 1.0625em; 
position:relative; 
width:31.5em; 
} 
/* */ 
form dl{ 
margin:0; 
} 
form dl dd{ 
/*  */ 
height:2.25em; 
margin:0 0 1.125em; 
position:relative; 
/*  */ 
} 
form dl dt{ 
margin:0 0 1.125em; 
} 
/* */ 
form dl dt+dd+dt+dd{ 
height:7.875em; 
} 
/* */ 
form dl+div{ 
line-height:2.25em; 
/*  */ 
margin:0; 
padding:0; 
/*  */ 
} 
h3{ 
color:#701; 
font:bold 1em/1.125em Helvetica,Arial,serif; 
margin:0 0 1.125em; 
text-transform:uppercase; 
} 
input[type=text]{ 
border:0.0625em solid #171717; 
font:1em/1.125em Georgia,serif; 
height:1.125em; 
margin:0; 
padding:0.5em 1.0625em; 
/*  */ 
position:absolute; 
top:0; 
/*  */ 
} 
/* */ 
legend{ 
background:aqua; 
margin:1.0625em 0 1.125em; 
padding:0; 
position:absolute; 
top:0; 
} 
/* */ 
p{ 
background:lime; 
margin:0 0 1.125em; 
} 
textarea{ 
border:0.0625em solid #171717; 
font:1em/1.125em Georgia,serif; 
height:6.75em; 
margin:0; 
padding:0.5em 1.0625em; 
/*  */ 
position:absolute; 
top:0; 
/*  */ 
} 
.Address{ 
margin:0 0 1.125em; 
} 
.Address dd{ 
margin:0; 
} 
.Address dt{ 
display:none; 
} 
.Address dt+dd+dt+dd{ 
display:inline; 
} 
.Address dt+dd+dt+dd+dt+dd+dt+dd{ 
display:block; 
text-transform:uppercase; 
} 
.Bad{ 
background:#dbb; 
color:#901; 
} 
.Calendar{ 
list-style:none; 
margin:0; 
padding:0; 
} 
.Calendar dd{ 
background:#701; 
font:bold 0.5625em/2em Helvetica,Arial,serif; 
margin:0; 
text-align:center; 
text-transform:uppercase; 
} 
.Calendar dl{ 
border:0 solid #111; 
border-width:0.0625em 0.125em 0.125em 0.0625em; 
float:left; 
margin:-0.0625em 1em 1em 1.0625em; 
width:3.375em; 
} 
.Calendar dt{ 
display:none; 
} 
.Calendar dt+dd+dt+dd{ 
background:#fff; 
color:#171717; 
font:1em/2.25em Georgia,serif; 
margin:0; 
} 
.Calendar h4{ 
float:right; 
font:1em/1.125em Georgia,serif; 
margin:0 0 1.125em; 
width:10.125em; 
} 
.Calendar li{ 
clear:both; 
} 
.Calendar p{ 
float:right; 
font:1em/1.125em Georgia,serif; 
width:10.125em; 
} 
.Good{ 
background:#bdb; 
color:#091; 
} 
.Left{ 
float:left; 
margin:0 0.5625em 0 1.125em; 
} 
.Message{ 
border-style:solid; 
border-width:0.0625em; 
margin:0 0 1.125em; 
padding:1em 1.0625em 0; 
} 
.Message p{ 
margin:0 0 1.0625em; 
padding:0.0625em 0 0; 
} 
.Narrow{ 
width:15.75em; 
} 
.Narrow input[type=text]{ 
width:13.5em; 
} 
.Right{ 
float:right; 
margin:0 1.125em 0 0.5625em; 
} 
.Wide{ 
/*  */ 
background:gray; 
/*  */ 
width:31.5em; 
} 
.Wide input[type=text]{ 
width:29.25em; 
} 
.Wide textarea{ 
width:29.25em; 
} 
.Wrapper{ 
background:url(../i/grid_w18_h18.png); 
margin:0 auto; 
overflow:hidden; 
padding:1.125em 0 0; 
position:relative; 
width:50.625em; 
} 
#Blackboard{ 
background:#171717; 
color:#fff; 
margin:1.125em 0 0; 
min-width:50.625em; 
} 
#Blackboard a{ 
background:#111; 
color:#fff; 
} 
#Blackboard h3{ 
color:#fff; 
} 
#Blackboard div>p{ 
font:1.5em/1.5em Georgia,serif; 
} 
#Footer{ 
background:#901; 
clear:both; 
color:#fff; 
min-width:50.625em; 
} 
#Footer h3{ 
color:#fff; 
} 
#Google_Copilot ol{ 
padding:0; 
} 
#Google_Copilot ol li{ 
list-style:none; 
margin:0 0 1.125em; 
padding:0; /* I.E.7 Fix */ 
} 
#Google_Map{ 
height:23.625em; 
margin:0 0 1.125em; 
width:31.5em; 
} 
#Google_Query dt{ 
/*  display:none; */ 
} 
#Header{ 
background:#901; 
min-width:50.625em; 
} 
#Header h1{ 
background:url(../i/the_shropshire_arms_w288_h72.gif) no-repeat 0 2.8125em; 
font:1em/1.125em serif; 
height:7.875em; 
margin:0 0 0 0.5625em; 
width:18em; 
} 
#Header h1 a{ 
display:none; 
} 
#Header h2{ 
background-color:#933; 
display:inline; 
font:1em/2.25em Georgia,serif; 
left:0; 
margin:1.125em 0 0 0.5625em; 
padding:0 0.5625em; 
position:absolute; 
top:0; 
} 
#Header h2 a{ 
color:#fff; 
text-decoration:none; 
} 
#Header h2 a span{ 
text-decoration:underline; 
} 
#Header ul{ 
list-style:none; 
height:2.25em; 
margin:0; 
padding:0; 
} 
#Header ul li{ 
display:inline; /* I.E.7 Fix */ 
} 
#Header ul li a{ 
background:#fff; 
color:#000; 
float:left; 
line-height:2.25em; 
margin:0 0 0 0.5625em; 
padding:0 0.5625em; 
text-decoration:none; 
} 
#Header .Wrapper{ 
background:url(../i/shield_w126_h126.gif) no-repeat 42.1875em 1.6875em; 
} 

這篇文章能得到愣神了，這樣我會提供一個鏈接到網頁，而不是發佈HTML：http://theshrop.com/d/call_us_or_call_in.php

我真的很感激答案和所有誰貢獻，在此先感謝！

Answer 1

老實說，很難說出發生了什麼事情，而且該頁面在我嘗試過的每個瀏覽器中看起來都不一樣。

雖然一些提示：

1 - 所有瀏覽器都爲元素自己的基地利潤率等等，所以這是一個好主意，使用某種形式的「重置」的CSS，這使得每保證金/填充0，所以當你用自己的css指定它時，每個瀏覽器都會爲一個元素解釋相同數量的邊距/填充。這是Eric Meyer製作的一個非常受歡迎的版本：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

2 - 設置高度可能是問題的一部分。通常最好讓內部元素設置高度，並讓容納元素自然流動。就你而言，fieldset中的所有內容應該告訴它有多高，而不是fieldset具有它自己的高度。

只是一些普遍的想法，希望它有幫助。