jQuery + CSS + IE 问题：页面加载时隐藏元素短暂出现

Posted 2023-05-07

【中文标题】jQuery + CSS + IE 问题：页面加载时隐藏元素短暂出现

【英文标题】：jQuery + CSS + IE problem: hidden elements appear briefly when page is loading

【发布时间】：2011-06-07 11:16:52

【问题描述】：

有没有其他人经历过下面描述的场景？

为了举例，这里有一个非常基本的描述：

#menuHolder 包含菜单项（#itemA、#itemB、#itemC、...#itemZ）

在 CSS 中，我将 #menuHolder's 溢出设置为隐藏。

使用 jQuery，我将 #menuHolder 设置为 0 的 minHeight，然后将鼠标悬停在特定元素上时将其扩展为 300 的 maxHeight。

在 FF、Safari 或 Chrome 中没有问题...但在 IE 中会发生以下情况：

当页面在 IE 中加载时，#itemA、#itemB、#itemC、...#itemZ 会在短时间内相互叠加。然后它们消失并表现正常。

就好像在页面加载之前无法识别 overflow:hidden 或 minHeight。

有什么想法吗？

谢谢 乙

【问题讨论】：

您在页面的哪个位置设置了 minHeight？

什么是 minHeight 和 maxHeight？ javascript 属性在某处使用？还是您的意思是 CSS 最小高度和最大高度？

抱歉，minHeight 和 maxHeight 只是我在 javascript 中使用的变量。

例如 var minHeight = 0;变量最大高度 = 300;然后： $("#divToBeHoveredOver").hover(function() $('#menuHolder').stop().animate('width': maxHeight, 400, 'swing'); , function() $('#menuHolder').stop().animate('width': minHeight, 400, 'swing'); );

【参考方案1】：

ie（如果我没记错的话至少最多 7 个）不知道最小高度

解决方案是使用一些类似的 css

min-height:100px;
height:100px; /* for ie7 */
height:auto !important; /* for all others */

最好使用一些条件注释技巧来定位 ie6/7，例如 http://html5boilerplate.com

【参考方案2】：

也许你应该让容器 display:none 在 css 中，使用 jquery 预加载现在不可见容器中使用的任何图像，然后在 jquery 中使用适当的高度而不是当鼠标悬停时使用 min- 和 max-。

【参考方案3】：

在某些情况下，这样的事情会起作用：

在页面加载期间不得出现的元素上，将其隐藏在标记中：

<ul id='my_element' style='visibility:hidden'>

然后，在应用 jquery 效果来显示它之前（即，slideDown()），删除属性并重新隐藏它：

$me = $('#my_element');  // cache it to improve performance
$('#some_other_element').click(function() 
  $me('style','visibility:visible').hide();
  $me.slideDown(800);
);

有一天 IE 支持将不需要这种滑稽动作。在那之前，希望这会有所帮助。

【参考方案4】：

对于一些旧的 jQuery 数据表（例如，1.6.x）仍然没有完美的解决方案，似乎所有隐藏的列都将简要显示：使用 bVisibility: false 表数据中的属性，或者设置列动态可见性。 fnSetColumnVis(1, false);

例如

jquery datatables hide column

有人知道这个问题在新版本的数据表中已经解决了吗？