Galleria 致命错误：无法从 CSS 中提取舞台高度。跟踪高度：0px答案

【问题标题】：Galleria Fatal error: Could not extract a stage height from the CSS. Traced height: 0pxGalleria 致命错误：无法从 CSS 中提取舞台高度。跟踪高度：0px
【发布时间】：2011-07-07 12:22:48
【问题描述】：

如果我有 <style type="text/css"></style> 行，即使它是空白的，Galleria 也会抛出错误消息“致命错误：无法从 CSS 中提取舞台高度。跟踪高度：0px。”

看起来即使我通过以下方式告诉 Galleria 使用 300 的高度：

$('#galleria').galleria({ 
width: 300, 
height: 300, 
transition: 'fade' 
});

它尝试首先确定高度，但 CSS 行混淆了它，所以它抛出了这个错误。如果我删除那一行，则不再有错误。

我还能使用<style type="text/css"></style>吗？我们使用它来根据使用它的客户定制我们网站的外观和感觉。

【问题讨论】：

您使用的是哪个版本的 Galleria？
在为此工作了几个小时后，我终于放弃了，决定稍后再做。当我回到它时，一切正常。我不知道解决方案是什么，我唯一能想到的就是我的代码中有两个对同一个 js 的引用，这导致了混乱。感谢所有回答的人。
当画廊在页面加载时隐藏时，我会看到这个，即它位于非活动标签上。写在论坛上：getsatisfaction.com/galleria/topics/…

标签： jquery galleria

【解决方案1】：

确保包括：

头：

<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script type="text/javascript" src="js/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

还有页内样式：

#galleria{height:467px}

在图片下方：

<script type="text/javascript">
$('#gallery').galleria({
width: 700,
height: 467 //--I made heights match
});
</script>

如果您在全新安装时遇到此故障排除问题，请添加直到找到原因。

【讨论】：

我的解决方案也可以使用。（在使用 twitter 引导程序时）。最常见的错误是由不可见元素（隐藏）引起的。所以我假设它可以在显示元素时执行（或让 Galleria 运行）。 $('#myTab li:eq(0) a').click(function (e) { e.preventDefault(); $(this).tab('show'); Galleria.run('#slide', {宽度：'100%'，高度：340}); });
谢谢！我错过了这个：#galleria{height:467px}
如果我不想指定高度怎么办。喜欢响应式布局？
非常感谢！仅在某些页面上我缺少 min-height

【解决方案2】：

它可能会帮助一些仍然遇到此错误的人：-

我收到此错误是因为我有一个隐藏的画廊。

修复：- 在 CSS 中给画廊 div 一个高度，然后在 js 文件中，

Galleria.run('#gallery', {
  height: parseInt($('#gallery').css('height')),
  wait: true
 });

查看这些链接了解更多信息：- http://galleria.io/docs/references/errors/

http://galleria.io/docs/options/wait/

【讨论】：

这为我完成了工作，谢谢！ wait 参数将强制画廊仅在 DOM 元素可见时才进行初始化。
是的！正是这样。图像在那里，但它们没有及时加载以使舞台达到它们的高度。非常感谢！

【解决方案3】：

您需要在 css 中为 Galleria 图像容器指定高度。这是 Galleria 显示图像的地方（因此它应该小于 Galleria 本身的高度）。

.galleria-stage {
    height: 450px;
    position: absolute;
    top: 10px;
    bottom: 60px;
    left: 10px;
    right: 10px;
    overflow: hidden;
}

【讨论】：

这导致 Opera Mobile 12 中的一些 offsetHeight 错误抬头，导致 Galleria 举手拒绝运行。明确地给舞台设置高度和宽度为我解决了这个问题。

【解决方案4】：

我只在 IE 中遇到过这个错误。解决方法是强制高度。

在 Galleria.classic.css CSS 中为 .galleria-stage 类添加高度

例子。

.galleria-stage { 
  height:450px; <-- set this to any height and i should work :)
  position: absolute; 
  top: 10px; 
  bottom: 60px; 
  left: 10px; 
  right: 10px; 
  overflow:hidden;
}

【讨论】：

这引起了 Opera Mobile 12 中的一些错误。明确地给舞台一个高度和宽度为我解决了这个问题。很好的提示，谢谢！

【解决方案5】：

场景

如果您遇到这种情况，很可能是因为您在页面加载时隐藏了 Galleria 元素。这在其他几个答案中有所提及，但这些答案概述的解决方案不一定是最好的方法。

问题

对我来说，当页面启动时，我将 Galleria 容器设置为 display:none;。 Galleria 对象位于灯箱中，因此在用户单击按钮之前它不会显示。这个display:none 属性是导致问题的原因。

解决方案

不要使用display:none; 隐藏元素，而是使用left:-9999px; 或margin-left:9999px 等较大的负左边距。这两种方法都可以确保 Galleria 正确加载。

【讨论】：

我采用了这种方法。在我的例子中，我使用了left: o; top: -2000px; 来保持需要渲染/处理的总面积，因为它显然会影响速度较慢的设备的性能。
这些巨大的页边距需要额外的步骤才能让您的页面在某些移动浏览器中正确可见...
感谢您的意见！对我来说它很有效，因为所有页面的高度都很短。如果页面很长，左边距可能会影响性能。我的解决方案的要点是找到一种方法来隐藏画廊而不使用display:none。

【解决方案6】：

如果您使用经典主题，请尝试将 DocType 设置如下，同时在galleria.classic.css 文件中的.galleria-stage css 类中设置高度和宽度

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

【讨论】：

我只在 IE 中遇到了舞台高度错误。关于“高度”的 cmets 并没有为我解决这个问题，但添加这个 DocType 可以。谢谢！

【解决方案7】：

我在使用 jQuery galleria 时遇到了同样的问题，我解决了。我修改了galleria-1.2.5.min.js中的一些参数。

Here是下载库的链接，复制代码粘贴到你的js文件中即可。

【讨论】：

【解决方案8】：

我正在为这个问题添加一个答案，因为以上所有内容都不适合我。就我而言，我在嵌入式跨域 javascript 小部件中动态加载 Galleria (1.2.7)。即使舞台高度设置正确，脚本也已加载且 Galleria 已正确初始化，但此错误消息会定期显示。

我最终修改了 Galleria 源以禁止显示错误消息（也许更好的选择是使其依赖于调试标志，但我觉得没有必要）

Galleria.raise = function( msg, fatal ) {

    var type = fatal ? 'Fatal error' : 'Error',

        self = this,

        css = {
            display: none;
        },

【讨论】：

【解决方案9】：

我曾经有相同的铅。然后我尝试了别的东西。我所有的 javascript 文件都位于我的 html 文件的末尾。所以我试图将它们全部移动到 </head> 结束标记之前。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/galleria/galleria-1.2.5.js" /></script>
<script type="text/javascript" src="lib/galleria/themes/classic/galleria.classic.min.js"></script>
</head>

我不是很高兴以这种方式编码（即最后的 javascript）。无论如何，它似乎工作，画廊很棒！

【讨论】：

【解决方案10】：

根据instructions，Setting dimensions 部分，在您的CSS 中执行此操作（显然切换#galleria 用于您标识包装器的任何方式，我使用一个名为galleria 的类，所以我使用.galleria )

#galleria { width: 700px; height: 400px; }

【讨论】：

【解决方案11】：

经过多次尝试，上述解决方案均不适合我。是一个奇怪的错误，因为它很难复制和跟踪，有时有效，有时无效。

但是尝试在网上找到的东西，这个似乎工作，目前。对于那些坚持这一点的人，我想值得一试：

打开galleria-1.2.6.min.js
将timeout:1E4 字符串替换为timeout:1E10

【讨论】：