0

希望这会引起某人的注意...

我正在使用Fancybox 1.3 w/Foundation. 我遇到的问题是 Foundation CSS 中的某些内容迫使我的Fancybox弹出窗口呈现得太小。当我HTML在渲染页面上检查时，我看到一个内联样式将高度设置为175px...

我难住了。如果我删除 FoundationCSS文件，问题就会消失。我猜我需要更改 Height 属性中的某些内容，但没有任何运气。

示例： http: //198.cmsintelligence.com/site/about-us（点击“播放此视频”）

4

2 回答 2

0

如果没有更多代码，很难在开发工具中进行调试。但我相信你的罪魁祸首在这里：#fancybox-inner object {

在 DEV 工具中，ID 将 100% 的高度应用于对象，这就是加载视频的内容。对象本身的高度值为 600px，但它被覆盖，因为上面的 ID 也具有!important高度。

还有你提到的 175px 的高度，内联样式是根据嵌套更深的内容动态生成的。我不相信有错。

编辑：明白了！

我在下图中突出了罪魁祸首。第一个在 fancybox.css 的第 20 行——foundation.min.css 的最后两行 1（无疑是一个巨大的重置规则）。以某种方式覆盖这些，你会是金色的。

#fancybox-inner embed, #fancybox-inner object {
height: 100% !important;
}

object, embed {
height: 100%;
}

img, object, embed {
max-width: 100%;
height: auto;
}

http://imageshack.us/photo/my-images/692/fancyboxbug.jpg/

于 2013-05-31T13:50:18.010 回答
0

只是一个想法，也许你已经尝试过了，因为它在你的脸上很漂亮。就像你说的那样，内联样式使它成为 175 像素，所以为什么不在你的 Foundatino CSS 中覆盖它。

div#fancybox-wrap{
    height: 480px;
}

您始终可以在高度末尾添加 !important（例如高度：480px ！important;）以强制它始终为该高度，或使用 em（例如高度：3em;）使其流动并根据查看器正在使用的屏幕尺寸。再说一次所有新手的事情，因为我在这个领域不是那么老，但也许这在某种程度上有所帮助。

于 2013-05-31T13:48:01.210 回答