8

FancyBoxに問題があります。画像のサイズに応じてラッパーのサイズを自動変更することになっています。それはしていません。具体的には小さすぎます。

これが私が使用したFancyBoxjQueryコードです：

$("a[rel=photo_gallery]").fancybox({
    'type'              : 'image',
    'padding'           : 10,
    'autoScale'         : true,
    'cyclic'            : true,
    'overlayOpacity'    : 0.7,
    'overlayColor'      : '#000000',
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'titlePosition'     : 'over',
    'titleShow'         : false,
    'resize'            : 'Auto'
});

他の誰かがこの問題に遭遇したことがありますか？

助けてくれてありがとう。

4

4 に答える 4

17

理解した ...

FancyBox CSSによってトリップされていたのは、私のCSSリセットでした。DIVのボックスサイズ設定スタイルを「border-box」にリセットしました。

修正は、FancyBox CSSに移動し、ラップ、外部、および内部のDIVのボックスサイズを「content-box」として宣言することでした。

そのようです：

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

うまくいけば、それはこれに遭遇する他の誰かを助けるでしょう。

于 2010-10-18T22:38:02.157 に答える
4

上記は私にはうまくいきませんでした（FB3beta）。

これが私の解決策です：

.fancybox-wrap, .fancybox-wrap *{
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -safari-box-sizing: content-box !important;
    box-sizing: content-box !important;
}
于 2013-11-09T10:48:33.960 に答える
1

ポップアップに表示される任意のHTMLでも同じ問題が発生しました。（Eric Meyerのreset.cssを使用する場合）これを修正するために必要なのはこれだけであることがわかりました。

.fancybox-overlay
{
    line-height: normal;    
}

reset.cssファイルの問題のあるコードはこれでした

body 
{
    line-height: 1;
}

免責事項：IE9とChromeでのみテストされていますが、動作しているようです。これは、執筆時点でのfancyboxの最新バージョンが何であれ対象です。

于 2013-02-03T01:43:12.090 に答える
1

また、ボックスサイズ設定のグローバルリセットを取り除くことが役立つこともわかりました。

/*
*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
*/

厄介な部分は、ボーダーボックスに依存していたすべてのアイテムを見つけて、それらのアイテムだけでそれを有効にすることです。幸いなことに、これまでに見つけたのは3つだけでした。ただし、Firebug /DeveloperToolsはそれを理解するのに大いに役立ちました。

于 2014-09-03T04:07:27.403 に答える