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代码本身存在一些错误，可能是一个不可见的控制字符。当我从其工作的页面获取表单的代码并将其粘贴到非工作表单的页面时，它可以工作。

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

1 个答案: