jquery - Chrome/Opera jQuery CSS ポジショニングが機能しない

Question

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>

score 0 · Accepted Answer

平

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

score 0 · Accepted Answer

.appendTo()代わりに関数を使用.after()

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

-編集ミスを修正-

score 0 · Accepted Answer

問題は、CSS の「Position」クラスで上と左をオーバーライドすることです

<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 スタイルの代わりに Left を配置できます

                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>

score 0 · Accepted Answer

Yes, even in Oct 2015 the JQuery CSS method does not work properly in Chrome but does in IE (in my case anyway.)

So for me, using Razor CSHTML/MVC, Chrome is ignoring the "top style" property when using JQuery in that it is not set in the html styling for the element in question. So this does not work properly in Chrome:

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

For some reason Chrome will acknowledge the left setting but ignore the top setting.

My workaround was to attack the html directly and this worked in both IE and Chrome:

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

Of course I am using CSHTML variables which allows me to get way with this. If you are not using CSHTML/MVC then at least you know that setting the HTML directly is a workaround you can try.

2015 年に Chrome がこのような基本的な JQuery CSS メソッドを適切に処理できないとは信じられません。

jquery - Chrome/Opera jQuery CSS ポジショニングが機能しない

4 に答える 4

Related

Reference