jQuery .css仅在Chrome中不起作用 [英] jQuery .css not working only in Chrome

问题描述

与此处的许多文章相反，我的以下脚本在Safari和Firefox中运行良好，但在Chrome中却无法运行. div#bg-4-1"应该以-1000的z-index加载页面，然后，当单击"h3#bubbleh3"(我知道，命名失控)时，z-索引移至4.

In contradiction to many posts here, my script below works well in Safari and Firefox but not in Chrome. The div "#bg-4-1" is supposed to load with the page at a z-index of -1000 then, when "h3#bubbleh3" is clicked (I know, the naming got out of hand), the z-index shifts to 4.

这在其他地方都非常出色.我已经将整个内容包装在$(window).load(function()中，但这并没有改变任何内容.

This works brilliantly everywhere else. I've wrapping the entire thing in $(window).load(function() but that doesn't change anything.

代码如下:

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                $(".ui-accordion").bind("accordionchange", function(event, ui) {
                  if ($(ui.newHeader).offset() != null) {
                    ui.newHeader, // $ object, activated header
                    $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500);
                  }
                });
             });
            $("h3#bubbleh3").on("click", function(event, ui) {   
                setTimeout(function() {            
                    if ($("section#bubble").css("display") === "none") {
                       $("#bg4-1").css("z-index", "-1000");
                    } else if ($("section#bubble").css("display") === "block") {
                       $("#bg4-1").css("z-index", "4");
                    }
                }, 350);
            });
            $("h3#mermaidh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#thingstellh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#sumpartsh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#knivesh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#redgreenh3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
            $("h3#resurrecth3").on("click", function(event, ui) {   
               $("#bg4-1").css("z-index", "-1000");
            });
        });
    </script>

谢谢您的见解！

推荐答案

我已经确认这是一笔交易:

I have confirmed that this is the deal here: z-index not properly rendered on iPad and Google Chrome 22

堆叠上下文.在Chrome浏览器中，堆叠上下文是在文档中的任意位置由任意一个元素构成的

Stacking contexts. In Chrome, "A stacking context is formed, anywhere in the document, by any element which is either

the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity)

" 在我的情况下，div#bg4-1位于固定的div内，因此kills可以退到整个页面后面.布洛克.

" In my case, the div#bg4-1 is inside a fixed div so that kills is ability to recede behind the entire page. Bullocks.

这篇关于jQuery .css仅在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！