Question: When using box-sizing: border-box, it causes the "close" button to be cut off. This is especially the case when using Foundation 3 by Zurb.

The code that seems to cause issues for fancybox is this:

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

```

Now, maybe the author needs to take border-box into consideration when doing the calcs, but I'd like to know if there's an easy way to override the behavior with CSS.

Here's a Fiddle that demonstrates what's happening. You can see how the close button gets cut off. <http://jsfiddle.net/jonthomas/SxZuR/4/>

Also, here's the issue on github: <https://github.com/fancyapps/fancyBox/issues/311>

Answer: 
[The author of the plugin provided the CSS necessary to fix this](https://github.com/fancyapps/fancyBox/issues/311). Use the following CSS to force fancybox and all of it's child elements to use content-box for box-sizing.

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

```

See it working here: <http://jsfiddle.net/jonthomas/ut93u/2/>

He also mentions to make sure you have the latest code. I have 2.0.6 and the above code fixes the issue fine. However you can always grab the latest code here: <https://github.com/fancyapps/fancyBox/zipball/master>
Thanks a lot for the solution. A great help.
One thing though. In my installation fancybox-wrap is an ID, not a CLASS. 
So I use:

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

```