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 너비와 높이를 부여했습니다 .Layout, 이것이 도움이되기를 바랍니다.

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 - 모든 여백/패딩 0을 만드는 것이 어떤 종류를 사용하는 것이 좋습니다를, 그래서 모든 브라우저, 요소에 대한 자신의 기본 마진 등이 "재설정"CSS를, 그래서 자신의 CSS로 지정하면 모든 브라우저가 요소에 대해 동일한 여백/패딩을 해석합니다. 이것의 아주 대중적인 버전은 Eric Meyer에 의해 만들었습니다 : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

2 - 높이 설정은 문제의 일부일 수 있습니다. 일반적으로 내부 요소가 높이를 설정하고 포함 요소가 자연스럽게 흐르도록하는 것이 가장 좋습니다. 귀하의 경우, 필드 세트 내부의 모든 것이 필드 세트 자체의 높이가 아니라 높이가되어야 함을 알려야합니다.

몇 가지 일반적인 생각은 도움이되기를 바랍니다.