为啥 Internet Explorer 将我的内容推送到页面的中间，好像在上面创建了一个巨大的边距？
Posted
技术标签:
【中文标题】为啥 Internet Explorer 将我的内容推送到页面的中间，好像在上面创建了一个巨大的边距？【英文标题】：Why does internet explorer push my content halfway down the page as if creating a huge margin above?为什么 Internet Explorer 将我的内容推送到页面的中间，好像在上面创建了一个巨大的边距？ 【发布时间】：2013-01-11 19:28:10 【问题描述】：我创建了一个将在 .aspx 模板中使用的 html 页面。我使用的 html 代码非常基本，包括一个电子邮件订阅表单。表单及其代码直接取自 Mailchimp，因为它们是我正在使用的电子邮件客户端。问题是该页面在除 Internet Explorer 之外的所有浏览器中都能正常加载，这会将我的整个 html 代码推到页面下方。我有一个包含在表单（jquery-1.8.2.min.js）中的 jquery 文件，我不确定这是否干扰了我的 html 代码，或者它是否是我没有为 Internet 正确指定的代码本身的问题探险家。我也不确定它是否与 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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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"
/>
<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;
【问题讨论】：
因为 IE 认为它超出了规则 :D 您可以从提取代码开始，直到只剩下这些容器。只有他们才会知道为什么。 如果你提供 jsFiddle... 它会给我们更好的主意。 感谢约瑟夫的回复。我已经尝试过了，但我认为这个问题与我使用的电子邮件表格有关，因为它似乎激活了巨大的保证金问题。还有其他想法吗？ 我不知道上面的 jsFiddle Abhijeet。它到底会做什么？ 【参考方案1】：一些元素是从这段代码中获得的：
<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-field-group 上方的这个 DIV。还没有关闭表格，最好仔细检查注册表单代码
</div><!--end form section-->
【讨论】：
嗨，Gary，这不仅是 div，而且还缺少部分表单。找不到这个标签“”？ 我的结束表单标签在最后： 您帖子中的html与您面前的完全一样吗？那里发生了一些奇怪的事情。现在您在 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 我已经把代码放到了 jsFiddle 中，它说一切都是有效的【参考方案2】：不确定是否是您粘贴到 *** 中的方式，但您需要缩进您的内容。 您需要为文件大小节省额外开销的日子已经一去不复返了。 使用 notepad++ 可以帮助您很快找到此错误，您使用什么文件编辑器？
【讨论】：
这是一个废话，但缩进并找到所有未闭合的标签。 IE 将在它认为合适的地方应用自己的结束标签。 大家好，问题已解决，这是 .aspx 模板的问题。我最终不得不将表单放入 iframe 中以使其工作。感谢大家的帮助，我真的很感激！以上是关于为啥 Internet Explorer 将我的内容推送到页面的中间，好像在上面创建了一个巨大的边距？的主要内容，如果未能解决你的问题，请参考以下文章
我的电脑为啥老是出现“Internet Explorer 无法显示该网页”
为啥我的表单不能在 Internet Explorer 9 中上传文件？