为什么相同的代码在不同的页面显示不同？

Question

您好有一个jQuery驱动的小型表单。它可以在90％的页面上正常工作，但在两页上，“提交”按钮不对齐。我检查了工作和非工作页面上的html和jquery，看不出有什么不同。我希望看到另一组人眼看看是什么导致提交按钮离得太远。

这里是一个工作页面（滚动至底部，报注册表格）：view page

这里是页面，它不能正常工作：view page

下面是形式的HTML：

<div id="news-signup"> 
      <div id="entry"> 
          <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" /> 
          <input type="submit"  value="::Submit Query::" id="red-submit" /> 
      </div> 
    </div> 

这里是不会掉出的jQuery：

$(document).ready(function() { 
    var emailInput = $("#your-email"); 

    emailInput.focus(function() { 
        //  THREE = ! 
        if(this.value === "YOUR EMAIL ADDRESS") { 
            this.value = ""; 
        } 
    }); 

    emailInput.blur(function() { 
        if(this.value === "") { 
            this.value = "YOUR EMAIL ADDRESS"; 
        } 
    }); 

    $("#red-submit").click(function() { 
        $.ajax({ 
            type: 'POST', 
            url: 'news.php', 
            data: { 
                'your-email': emailInput.val() 
            }, 
            success: function() { 
                var image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"}); 
                $('#news-signup input').hide(); 
                $('#news-signup').append(image);                 
            } 
        }); 
    }); 
}); 

这里是CSS定位：

#news-signup #entry, 
#news-signup form     { 
     width:335px; 
     height:35px; 
     position: absolute; 
     top: 52px; 
     left: 590px; 
     } 


#news-signup input#your-email  { 
     width: 195px; 
     height: 20px; 
     position: relative; 
     top: 5px; 
     left: 0; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border: 1px solid #cbcbcb; 
     font: 14px "Trebuchet MS", Helvetica, sans-serif; 
     color: #cbcbcb; 
     } 
#news-signup img     { position: absolute; top: 50px; left: 600px; }                 

input#red-submit     { 
      width: 90px; 
      height: 30px; 
      border-style: none; 
      text-indent: -9999px; 
      position: relative; 
     top: -20px; 
     left: 250px; 
     cursor: pointer; 
     font-size: 0; 
     line-height: 0; 
     background-color: transparent; 
     background-image: url(../_images/btn_submit-red.png); 
     } 

感谢您的帮助！

Answer 1

我比较了哪些CSS样式应用于使用萤火虫的每个元素，并且页面之间没有差异。然后，我试图通过逐段删除内容来消除其余代码中的错误，并且它也没有任何区别。用这个椭圆代码只剩下了表单本身的代码。

表单中的HTML代码本身存在一些错误，可能是不可见的控制字符。当我从它工作的页面获取表单的代码并将其粘贴到非工作表单的页面中时，它就可以工作。