代码之家  ›  专栏  ›  技术社区  ›  forrest

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

  •  0
  • forrest  · 技术社区  · 15 年前

    Hi有一个jquery驱动的小条目表单。它在90%的页面上运行良好,但在两个页面上,“提交”按钮不对齐。我已经检查了工作页面和非工作页面上的html和jquery,看不出有什么区别。我希望有另一双眼睛看看是什么导致提交按钮如此遥远。

    这是一个工作页(滚动到新闻稿注册表单的底部): view page

    这是一个不正常的页面: view page

    <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); 
            }
    

    1 回复  |  直到 15 年前
        1
  •  1
  •   Guffa    15 年前

    我使用firebug比较了应用于每个元素的CSS样式,页面之间没有区别。然后我试图通过逐段删除内容来省去其余代码中的错误,这也没有任何区别。省略号后只剩下形式本身的代码。

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