在google chrome中使用outerWidth（）计算错误宽度[onload] [英] wrong width calculation using outerWidth() in google chrome [onload]

问题描述

我在div里面有一个导航栏（topmenu）。如果菜单的宽度大于外部div的宽度，我必须隐藏菜单元素的其余部分。不幸的是我不能使用 overflow：hidden 作为div。所以我使用 .outerWidth（）函数来计算总宽度div的宽度和每个元素的宽度（li），并隐藏溢出元素。所以我的问题是它的工作正常在Firefox（19.0），IE（8）！，但不是在铬。在铬中，所有元素都隐藏起来。问题解决时，我改变

$（document）.ready（function（）{}）; to < code $（window）.load（function（）{}）;

但是，一秒钟，然后它隐藏（IE，FF它仍然工作正常）。有没有更好的解决方案？或

样本

c>< div style =width：300px; >
< ul id =menu1>
< li class =noChild>< a href =＃> 3选项< / a>< / li>
< li class =noChild>< a href =＃> 2选项< / a>< / li>
< li class =noChild>< a href =＃> 1选项< / a>< / li>
< / ul>
< / div>

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

我的类似案例

解决方案

实际上，解决方案很简单。我使它变得复杂。在下图中我们可以看到加载脚本，图像和css的过程。在我的情况下，我已经在CSS上面添加了脚本链接，如$ b $ = '的jquery.js' >< /脚本>
< script type ='text / javascript'src ='menu.js'>< / script>
< link rel =stylesheethref =style.csstype =text / cssmedia =screen/>

及其加载如图2所示。所以我的脚本在加载css之前执行。我无法获得css的属性。

当我将位置更改为

 < link rel =stylesheethref =style.csstype =text / cssmedia =screen/> 
< script type ='text / javascript'src ='jquery.js'>< / script> 
< script type ='text / javascript'src ='menu.js'>< / script> 
  

我的脚本在加载完css之后执行（图片1）。所以现在它完美。

I have a navigation bar(topmenu) inside a div. I have to hide the rest of the menu elements if the width of the menu is greater than that of the outer div. Unfortunately I cant use overflow:hidden for the div .So I use .outerWidth() function to calculate the total width of the div and the width of each elment(li), and hide the overflow elements. So my problem is its works fine in firefox(19.0),IE(8)!, but not in chrome. In chrome all elements are hidden. The problem resolves when i change

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

But then, The total ul is shown for a fraction of second, then it get hidden(IE,FF it still works fine). Is there any better solution for this? Or any different logic.

Sample

<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

解决方案

Actually the solution was simple. I made it complicated. In below image We can see the process of loading script,image, and css as well. In my case I had added script link above css like

<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" />

and its loads like image 2. so my script executes before the css is loaded. And I wasnt able to get the properties of css.

When I changed position as

<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>

My script is executed after the completion loading the css(image 1). So Now it works perfect.

这篇关于在google chrome中使用outerWidth（）计算错误宽度[onload]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！