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

【问题标题】：wrong width calculation using outerWidth() in google chrome [onload]在谷歌浏览器中使用 outerWidth() 计算错误的宽度 [onload]
【发布时间】：2013-02-08 00:09:17
【问题描述】：

我在 div 中有一个导航栏（顶部菜单）。如果菜单的宽度大于外部 div 的宽度，我必须隐藏其余的菜单元素。不幸的是，我不能将overflow:hidden 用于 div。所以我使用.outerWidth() 函数来计算 div 的总宽度和每个 elment(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

【问题讨论】：

标签： jquery google-chrome onload document-ready outerwidth

【解决方案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）。所以现在它完美运行了。

【讨论】：