jquery - 在谷歌浏览器中使用outerWidth()计算错误的宽度[onload]

Question

我在 div 中有一个导航栏(顶部菜单)。如果菜单的宽度大于外部 div 的宽度，我必须隐藏其余的菜单元素。不幸的是我不能对 div 使用 overflow:hidden 。所以我使用 .outerWidth() 函数来计算 div 的总宽度和每个 elment(li) 的宽度，并 overflow hidden 元素。所以我的问题是它在 firefox(19.0)、IE(8)! 中工作正常，但在 chrome 中不行。在 Chrome 中，所有元素都被隐藏。当我改变时问题就解决了

$(document).ready(function() {}); 到 $(window).load(function() {});

但是，总 ul 显示了几分之一秒，然后它被隐藏(IE，FF 它仍然工作正常)。对此有更好的解决方案吗？或者任何不同的逻辑。

示例

<div style="width:300px;" > 
<ul id="menu1">
    <li class="noChild "><a  href="#" >3 Option</a></li>
    <li class="noChild"><a href="#" >2 Option</a></li>
    <li class="noChild "><a  href="#" >1 Option</a></li>
 </ul>
</div > 

http://jsfiddle.net/RSA3X/4/

similar case of mine

Answer 1

其实解决办法很简单。我把事情搞复杂了。在下图中我们还可以看到加载脚本、图像和 CSS 的过程。就我而言，我在 css 上方添加了脚本链接就像

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

其加载类似于图像 2。因此我的脚本在加载 css 之前执行。而且我无法获取 css 的属性。

当我改变立场时

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='menu.js'></script>

我的脚本在完成加载 css(图 1)后执行。所以现在它工作完美。