1

box-sizing: border-box を使用すると、「閉じる」ボタンが切り取られます。これは、Zurb の Foundation 3 を使用する場合に特に当てはまります。

fancybox で問題を引き起こすと思われるコードは次のとおりです。

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

さて、作成者は計算を行うときにボーダーボックスを考慮する必要があるかもしれませんが、CSS で動作をオーバーライドする簡単な方法があるかどうか知りたいです。

これは、何が起こっているかを示す Fiddle です。閉じるボタンが切れる様子がわかります。http://jsfiddle.net/jonthomas/SxZuR/4/

また、github の問題は次のとおりです: https://github.com/fancyapps/fancyBox/issues/311

4

3 に答える 3

5

プラグインの作成者は、これを修正するために必要な CSS を提供しました。次の CSS を使用して、fancybox とそのすべての子要素に、ボックスのサイズ設定に content-box を使用するように強制します。

.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

于 2012-07-19T14:18:04.950 に答える
2

解決策をどうもありがとう。とても助かります。しかし、1つのこと。私のインストールでは、fancybox-wrap は CLASS ではなく ID です。だから私は使用します：

#fancybox-wrap, #fancybox-wrap * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}
于 2012-11-08T16:11:45.410 に答える
1

jsfiddle をテストしましたが、問題は Firefox (14.0.1) では表示されませんが、Chrome (20.0.1132.57 m) では表示されません。

私が見つけた回避策は、この CSS インライン宣言を追加することです (fancybox css ファイルが読み込まれた後):

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

注：これはfancybox v2.0.6+用です

于 2012-07-19T01:15:55.530 に答える