我创建了一个将在 .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"
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; }