使用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/

Answer 1

该插件的作者提供了解决此问题所需的CSS.使用以下CSS强制fancybox及其所有子元素使用内容框进行大小调整.

.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