css - 使用 Foundation 3 和 CSS 边框框时，Fancybox 关闭按钮被切断

Question

当使用 box-sizing:border-box 时，它会导致“关闭”按钮被切断。在使用 Zurb 的 Foundation 3 时尤其如此。

似乎导致fancybox出现问题的代码是这样的：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

现在，也许作者在进行计算时需要考虑边框框，但我想知道是否有一种简单的方法可以用 CSS 覆盖行为。

这是一个演示正在发生的事情的小提琴。您可以看到关闭按钮是如何被切断的。http://jsfiddle.net/jonthomas/SxZuR/4/

score 5 · Accepted Answer

该插件的作者提供了解决此问题所需的 CSS。使用以下 CSS 来强制 fancybox 及其所有子元素使用 content-box 来调整框大小。

.fancybox-wrap, .fancybox-wrap * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

他还提到要确保您拥有最新的代码。我有 2.0.6，上面的代码很好地解决了这个问题。但是，您始终可以在此处获取最新代码：https ://github.com/fancyapps/fancyBox/zipball/master

score 2 · Accepted Answer

非常感谢您的解决方案。一个很大的帮助。不过有一件事。在我的安装中，fancybox-wrap 是一个 ID，而不是 CLASS。所以我使用：

#fancybox-wrap, #fancybox-wrap * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

score 1 · Accepted Answer

我测试了 jsfiddle，但问题没有出现在 Firefox（14.0.1）中，但出现在 Chrome（20.0.1132.57 m）中

我发现的解决方法是添加这个 CSS 内联声明（在加载了 fancybox css 文件之后）：

.fancybox-wrap {
 overflow: visible !important;
}

注意：这适用于 fancybox v2.0.6+

3 回答 3