2

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

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

正常工作
（来源：aspadvice.com）

<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>
4

4 回答 4

0

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

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

-编辑修正了一个错字-

于 2013-01-06T11:44:24.007 回答
0

问题是覆盖 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">

这里有一个变化“顶部：-4px；左侧：-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>

于 2012-08-25T00:37:37.870 回答
0

甚至

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

不适position:relative用于 Chrome 中的元素（在 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);
于 2012-10-10T04:53:59.567 回答
0

是的，即使在 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 方法。

于 2015-10-18T22:41:57.747 回答