jquery - 为什么同样的代码在不同的页面显示不同？

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

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

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