代码之家  ›  专栏  ›  技术社区  ›  two7s_clash

在Safari中正确计算$(this).css(width)

  •  2
  • two7s_clash  · 技术社区  · 15 年前

    this 今天早些时候提问,但我想我太早就给出了正确的答案。我正在尝试用jquery在Safari中获取锚元素的css长度和宽度。但我一直得到“0”的返回,有人告诉我,这是因为JavaScript在呈现CSS之前就启动了——这是WebKit浏览器的一个怪癖。

    这是原始页: http://f1shw1ck.com/jquery_sandbox/csspops-orig.html

    但是,我编写了一个小测试,告诉jquery在获取CSS之前等待所有内容完全呈现。 http://f1shw1ck.com/jquery_sandbox/csspops.html

    对于选择器

    a.popup {
                    width: 800px;
                    height: 560px;
                }
    

    和HTML

    <a href="http://www.metmuseum.org/toah/hd/apol/hd_apol.htm" class="popup">African Rock Art: Apollo 11 Cave Stone (c. 25,500 - 23,500 BCE); Wonderwerk Cave Stones (c. 8000 BCE)</a>
    

    等待页面完全完成,然后获取这些维度:

    $(document).ready(function () {
                    if (jQuery.browser.safari && document.readyState != "complete"){
                        //console.info('ready...');
                        setTimeout( arguments.callee, 5000 );
                        return;
                      }
              alert($("a.popup").css("width"));
            });
    

    除了“0”还在Safari中返回。我这样做是错误的,还是有其他原因在起作用?

    谢谢!

    2 回复  |  直到 15 年前
        1
  •  2
  •   kmiyashiro    15 年前

    科林是对的。它返回0的原因是因为根据Safari,锚没有有效的CSS宽度,因为它们是内联元素。这可能是jquery for safari中的一个bug。

    与bug无关,设置锚点的宽度来定义它触发的弹出窗口的宽度对我来说似乎不是一个好的实践。你为什么要这样做?设置锚的CSS与锚的显示无关,这看起来有点向后,只需在javascript中设置它以查找a.popup.large并为弹出窗口设置一定的宽度/高度。否则,请查找.popup并设置不同的高度和宽度。

        2
  •  1
  •   Colin    15 年前

    试加 display: block 到弹出窗口?

    这将强制链接的宽度为800px,如果要获得其自动宽度,请尝试

    alert($("a.popup").width());