为什么IE浏览器将我的内容推到页面的一半，好像在上面创造了一个巨大的边距
Why does internet explorer push my content halfway down the page as if creating a huge margin above?
我创建了一个将在.aspx模板中使用的html页面。我使用的html代码非常基本，包括一个电子邮件订阅表单。表单及其代码直接取自Mailchimp，因为它们是我正在使用的电子邮件客户端。问题是该页面在除Internet Explorer之外的所有浏览器中加载良好，它将我的整个html代码向下推送到页面下方。我有一个 jquery 文件包含在表单中（jquery-1.8.2.min.js），我不确定这是否干扰了我的 html 代码，或者它是否是代码本身的问题，我没有为 Internet Explorer 正确指定。我也不确定它是否与Mailchimp表格有关。我已经尝试了一切可能来解决这个问题，但似乎没有任何效果。如果有人能帮忙或有任何想法，我将不胜感激。请参阅下面的代码和屏幕截图。谢谢，加里
这是我的代码：
.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" name="EMAIL" class="required email"
id="mce-EMAIL" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response"
style="display:none"></div> <div class="response"
id="mce-success-response" style="display:none"></div> </div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
这是我的 CSS
@charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }
不确定这是否是您粘贴到堆栈溢出中的方式，但您需要缩进您的内容。需要为文件大小节省额外开销的日子已经一去不复返了。使用记事本++可以帮助您很快找到此错误，您使用什么文件编辑器？
一些元素是从这个代码中解脱出来的：
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
关闭 MC 字段组上方的此 DIV。另外表单没有关闭，最好仔细检查注册表单代码
</div><!--end form section-->
相关文章：
- 检查元素是否悬停在上面
- 用javascript中的d3绘制圆圈并在上面写文字
- 将鼠标悬停在按钮上会导致另一个按钮悬停在上面
- ExtJS面板总是“在前面”/总是“在上面”
- 如何制作一个按钮，当悬停在上面时，会滑动并显示链接 (JS）
- Chrome扩展程序:如何让HTML元素被鼠标悬停在上面
- jQuery:当用户将鼠标悬停在上面时具有较大图片的按钮
- 将引导程序附加到子导航的顶部，而不是在上面，引导程序
- Hapi.js文件上传我如何获取文件，这样我就可以在上面使用imageMagick命令行工具
- 我正在一个HTML5画布上工作，并试图在上面画圆圈，但当我试图使用循环时，一切都消失了
- 有没有一种方法可以把鼠标悬停在上面，这样它就可以'It’他不那么烦躁
- 如何通过在上面画另一条线来删除线
- 强制OpenLayers标记层在上面绘制，并在下面标记层
- 如何使图像停留在它自己的位置，鼠标在上面
- 确定相关元素是在上面还是在下面
- 数据属性没有更新，onclick事件仍然在上面
- 将HTML字符串发送到服务器，然后我可以使用DOM与它交互吗?可以在上面使用jQuery吗?
- 当删除一个物品内部的内容时，在上面创建了神秘空间
- 如何让盒子粘在上面
- 为什么IE浏览器将我的内容推到页面的一半，好像在上面创造了一个巨大的边距
