CSS迫使Fancybox打开过小(高度)

Question

希望这能引起某人的注意…

我使用Fancybox 1.3 w/Foundation。我遇到的问题是基础CSS中的某些东西迫使我的Fancybox弹出渲染太小。当我在渲染页面上检查HTML时，我看到一个内联样式将高度设置为175px…

我难住了。如果我删除基础CSS文件，问题就消失了。我猜我需要改变的东西在高度属性，但没有任何运气。

样本:http://198.cmsintelligence.com/site/about-us(点击'播放视频')

Answer 1

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

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

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

---

EDIT:明白了!

我在下面的图片中强调了罪魁祸首。第一个是在fancybox.css的第20行——foundation.min.css的最后两行(毫无疑问是一个巨大的重置规则)。以某种方式覆盖这些，你将是金色的。

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

Answer 2

只是一个想法，也许你已经尝试过了，因为它很漂亮。就像你说的，内联样式是175px，所以为什么不在你的基础CSS中覆盖它呢?

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

你总是可以在高度后面加上!important(例如:高度:480px !important;)来强制它始终是那个高度，或者使用em(例如高度:3em;)来使它变得流畅，并根据观看者使用的屏幕大小而变化。这些都是新手的东西，因为我不是这个领域的老手，但也许这在某种程度上有帮助。