Question

我有以下代码在IE和Firefox中正常工作，但在Opera或Chrome中无法正常工作。代码基本上创建了一个在输入后直接插入的DIV。在IE和Firefox中，新div将显示与输入重叠。但是在Opera和Chrome中，div将出现在输入的右下角旁边，定位无法正常工作。有什么建议吗？

编辑：我已经包含了我希望它看起来像的图像，它在Chrome和Opera中没有这样做。重叠是故意的。在Chrome / Opera中，绿色div位于右下角，这是一个起始位置，但CSS类的位置应该修改它。

Working correctly http://aspadvice.com/photos/images_to_go_with_what_ive_learned/images/86290/original.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
        <script type="text/javascript">
            jQuery.fn.makeDiv = function () {
                $(this).each(function () {
                    var className = "wFWn";

                    $(this).after("<div class='" + className + "'>The Div</div>");
                    var c = $(this).next("." + className);

                    var topStartPosition = $(this).outerHeight();
                    var leftStartPosition = $(this).outerWidth();
                    c.addClass('green');
                    c.addClass('position');
                    var pos = $(this).offset();
                    var iTopOffset = 0;
                    if (c.css("top") != "auto")
                        iTopOffset = parseInt(c.css("top").substring(0, c.css("top").indexOf("px")));
                    var iLeftOffset = 0;
                    if (c.css("left") != "auto")
                        iLeftOffset = parseInt(c.css("left").substring(0, c.css("left").indexOf("px")));
                    c.offset({ top: pos.top + topStartPosition + iTopOffset, left: pos.left + leftStartPosition + iLeftOffset });
                    c.css("position", "relative");
                });
                return this;
            };
            $(document).ready(function () {
                $("#txtTest2").makeDiv();
            });
        </script>
        <style type="text/css">
            .position {top: -4px; left: -100px; width: 140px; font-size: 11px; }
            .green { background-color: lime; border: solid 1px black;}
        </style>
    </head>
    <body>
        <div id="two">
            <input name="txtTest2" type="text" maxlength="10" id="txtTest2" /><br />
        </div>
    </body>
</html>

Answer 1

问题是覆盖CSS

中“位置”类的顶部和左侧

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
    <script type="text/javascript">
        jQuery.fn.makeDiv = function () {
            $(this).each(function () {
                var className = "wFWn";

                $(this).after("<div class='" + className + "'>The Div</div>");
                var c = $(this).next("." + className);

                var topStartPosition = $(this).outerHeight();
                var leftStartPosition = $(this).outerWidth();
                c.addClass('green');
                c.addClass('position');
                var pos = $(this).offset();

这里你可以把顶部而不是CSS样式

                var iTopOffset = -4;
                if (c.css("top") != "auto")
                    iTopOffset = parseInt(c.css("top").substring(0, c.css("top").indexOf("px")));

这里你可以把左边而不是CSS样式

                var iLeftOffset = -100;
                if (c.css("left") != "auto")
                    iLeftOffset = parseInt(c.css("left").substring(0, c.css("left").indexOf("px")));
                c.offset({ top: pos.top + topStartPosition + iTopOffset, left: pos.left + leftStartPosition + iLeftOffset });
                c.css("position", "relative");
            });
            return this;
        };
        $(document).ready(function () {
            $("#txtTest2").makeDiv();
        });
    </script>
    <style type="text/css">

这里有一个变化“top：-4px; left：-100px;”已从“.position {}”

中删除

        .position { width: 140px; font-size: 11px; }
        .green { background-color: lime; border: solid 1px black;}
    </style>
</head>
<body>
    <div id="two">
        <input name="txtTest2" type="text" maxlength="10" id="txtTest2" /><br />
    </div>
</body>

Answer 2

甚至

jQuery('#someelementid').css('left', '155');

不适用于Chrome中position:relative的元素（在IE中），因此可能是您遇到问题的根本原因。

不过，

jQuery的.offset（）适用于所有浏览器：

//jQuery('#ProgressIcon').css('left', '155');       // didn't work in chrome
var position = jQuery('#ProgressIcon').offset();
position.left += 133;       //155 210
jQuery('#ProgressIcon').offset(position);

Answer 3

使用.appendTo()函数代替.after()

$("<div class='" + className + "'>The Div</div>").appendTo($(MainDiv));

- 编辑修复了拼写错误 -

Answer 4

是的，即使在2015年10月，JQuery CSS方法在Chrome中也无法正常工作，但在IE中也是如此（无论如何都是这样。）

所以对我来说，使用Razor CSHTML / MVC时，Chrome在使用JQuery时忽略了“顶级样式”属性，因为它没有在相关元素的html样式中设置。因此，这在Chrome中无法正常运行：

$("#@tileid").css({ "top": top, "left": left  });

出于某种原因，Chrome会确认左侧设置但忽略顶部设置。

我的解决方法是直接攻击html，这在IE和Chrome中都有效：

 <div id="@tileid" class="tile" style="clear:both;top:@toppx; position:absolute;left:@leftpx;">

当然我正在使用CSHTML变量，这让我可以解决这个问题。如果您没有使用CSHTML / MVC，那么至少您知道直接设置HTML是一种可以尝试的解决方法。

我无法相信Chrome在2015年无法正确处理这种基本的JQuery CSS方法。

Chrome / Opera jQuery CSS定位无法正常工作

4 个答案: