當使用Foundation 3和CSS邊框時，Fancybox關閉按鈕被切斷

Question

當使用方框大小：邊框時，會導致「關閉」按鈕被切斷。 Zurb使用Foundation 3時尤其如此。

似乎令人的fancybox問題的代碼是這樣的：

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

現在，也許筆者需要做Calcs（計算）時採取的邊界框考慮，但我想知道是否有一種簡單的方法來覆蓋CSS的行爲。

這是一個小提琴，演示發生了什麼。您可以看到關閉按鈕如何切斷。 http://jsfiddle.net/jonthomas/SxZuR/4/

而且，這裏的GitHub上的問題：https://github.com/fancyapps/fancyBox/issues/311

Answer 1

The author of the plugin provided the CSS necessary to fix this。使用下面的CSS來強制fancybox及其所有子元素使用content-box來進行box-sizing。

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

看到它在這裏工作：http://jsfiddle.net/jonthomas/ut93u/2/

他還提到，以確保您有最新的代碼。我有2.0.6和上面的代碼解決了這個問題。不過，您隨時可以在此處獲取最新代碼：https://github.com/fancyapps/fancyBox/zipball/master

Answer 2

我測試的jsfiddle和問題不會在Firefox中顯示出來（14.0.1），但在Chrome（20.0.1132.57米）

我找到的解決方法是加入這個CSS在線聲明（僅次於CSS的fancybox文件加載）：

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

注意：本作的fancybox v2.0.6 +

Answer 3

非常感謝該解決方案。非常有幫助。 但有一件事。在我的安裝中，fancybox-wrap是一個ID，而不是CLASS。 於是我就用：

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