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: 
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;
}

```
I tested the jsfiddle and the issue doesn't show up in Firefox (14.0.1) but in Chrome (20.0.1132.57 m) 

The workaround I found is adding this CSS inline declaration (AFTER the fancybox css file is loaded):

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

```

**NOTE** : this for fancybox v2.0.6+