0

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

2 回答 2

0

不确定它是否是您粘贴到 stackoverflow 中的方式,但您需要缩进您的内容。您需要为文件大小节省额外开销的日子已经一去不复返了。使用 notepad++ 可以帮助您很快找到此错误,您使用什么文件编辑器?

于 2013-01-28T13:03:47.450 回答
0

一些元素来自此代码:

<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-->
于 2013-01-28T12:55:09.240 回答