在Google Chrome [onload]中使用outerWidth（）进行错误的宽度计算

Question

我在div中有一个导航栏（topmenu）。如果菜单的宽度大于外部div的宽度，我必须隐藏其余的菜单元素。不幸的是，我无法使用overflow:hidden作为div。因此，我使用.outerWidth()函数来计算div的总宽度和每个元素的宽度（li），并隐藏溢出元素。所以我的问题是它在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）完成后执行。所以现在它完美无缺。