非常に異常なマージンが常にInternet Explorerに表示される[CSS]

Question

Internet Explorerでのみこれが行われます：フィールドセットの下に余分な余白（19ピクセル）があります。 ！自分で試してみてください。http://theshrop.com/d/call_us_or_call_in.phpをご覧ください。援助するために私はグリッドといくつかの背景色を追加しました。フィールドセットには1.125emの下限があり、Safari、FirefoxなどではInternet Explorerに余分な19ピクセルがありますか？私はフィールドセットに幅と高さを与えていますので、レイアウトに役立ちます。

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; 
} 

この投稿は愚か長いので、私は、Webページへのリンクを提供するのではなくHTMLを投稿します得ることができます：http://theshrop.com/d/call_us_or_call_in.php

は、私は本当に答えと、事前に感謝を貢献するすべての人に感謝！

Answer 1

正直なところ、何が起こっているのかわからなくて、私が試したすべてのブラウザでそのページが違って見えます。しかし

いくつかのヒント：

1 - ので、すべてのブラウザが要素のために独自の基本マージンなどを持っているので、それはすべてのマージン/パディング0になり、CSSを、「リセット」のいくつかの並べ替えを使用することをお勧めしますあなた自身のCSSでそれを指定すると、すべてのブラウザが同じ量のマージン/パディングを要素に解釈します。これの非常に一般的なバージョンはEric Meyerによって作成されたものです。http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

2 - 高さの設定は問題の一部になります。通常、内部要素に高さを設定させ、要素を自然にフローさせるのが最善です。あなたのケースでは、フィールドセット内のすべてが、自分自身の高さを持つフィールドセットではなく、どれだけ高いかを伝える必要があります。

ちょっとした一般的な考え方が役立ちます。