Question

这是我关于stackoverflow的第一个问题。我过去常常用你们回答很多问题，但这一次，我找不到我想要的东西，所以任何帮助都会受到赞赏！

我有一个简单的网站，我正在玩css，javascript，jQuery和html。我有一个问题，我想通过javascript直接在最低的现有文本框下面添加一个输入文本框。它似乎相当简单，它在ie9和firefox中正常工作，但在chrome中，每个新文本框都被向右推2像素。

这是html和javascript代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <header> <h3>Header to the 3rd degree!</h3></header>
        <section class="textboxes">

            <input type="textbox"  class="duplicate" />

        </section>
    </body>
</html>

的javascript

$(function(){$('.duplicate').attr('onclick', 'createInputBox()');   });
function createInputBox(){

    var inputs = $('.duplicate');
    var lastInput = inputs[inputs.length - 1];

    var position = getAbsolutePosition(lastInput);
    var x = position[0];
    var y = position[1] + 25;
    $('.textboxes').append(inputTextBoxOpenTag + "style=\"position:absolute; left:" + x + "px; top:" + y + "px;\">" + inputTextBoxCloseTag );   
}

function getAbsolutePosition(object){

    var curleft = curtop = 0;

    if(object.offsetParent){

        do{
            curleft += object.offsetLeft;
            curtop += object.offsetTop;
        } while(object = object.offsetParent);

        return [curleft, curtop];
    }
}

var inputTextBoxOpenTag = "<input type=\"textbox\" class=\"duplicate\" onclick=\"createInputBox()\"  "
var inputTextBoxCloseTag="</input>"

所以基本的想法是每次你点击一个文本框，在最后一个文本框下面添加一个新的。

使用最后一个文本框的当前位置设置新文本框位置。在chrome中调试之后，我可以看到水平位置x被设置为我想要的实际值。但是，当再次调用该函数时，它声称实际位置比它在上一次函数调用中设置的位置大2个像素。

虽然这个页面显然不适合用于任何重要的事情，但我觉得知道造成这个问题的原因可能会给我更多信息，说明为什么chrome在我正在进行的其他网站上显示一些文本框，而firefox和ie9显示它们就好了。

再次感谢您的帮助！

两个像素添加到通过javascript仅在chrome中添加的元素的绝对位置

0 个答案: