0

私のページでは、FullCalendar jQueryプラグインを使用して、毎月のイベントカレンダーを表示しています。次のスクリーンショットに示すように、同じ日にイベントが発生した場合、FirefoxまたはIEでカレンダーを表示すると、イベントの間に非常に小さなスペースが残ります。

ここに画像の説明を入力してください

一方、同じページがChromeで表示される場合、これらのイベントの間に大きな（不要な）スペースが表示されます。

ここに画像の説明を入力してください

Chromeでページを表示するときに、この空きスペースをなくすにはどうすればよいですか？

アップデート

アプリからすべてのブートストラップスタイルを削除しましたが、問題は発生しなくなったため、Chromeでのカレンダーのレンダリングにのみ適用されているブートラップCSSルールがいくつかあると思います。今、私はどのルールを理解する必要があります...

4

4 に答える 4

2

修理済み

不思議なことに、レイアウトの問題はこの CSS ルールによって引き起こされていました

    a {
        -webkit-transition: all 0.15s ease-out 0s !important;
        -moz-transition: all 0.15s ease-out 0s !important;
        -o-transition: all 0.15s ease-out 0s !important;
        transition: all 0.15s ease-out 0s !important;
    }

私はそれを次のように変更しました：

    a {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }

そして問題は解決されました

于 2013-01-26T18:15:33.280 に答える
1

1つ確かなことは、それはどういうわけかtop、ラッピングa要素のインラインポジショニングのコードを設定することを含むということです。FirefoxとChromeの両方が最初の要素をに設定していますtop: 52pxが、2番目の要素の配置は異なり、Firefoxはに設定されtop: 95px、Chromeはに設定されていtop: 137pxます。

この上位の位置の違いは、 withクラス内のネストされた場所heightに設定されている違いが原因である可能性があります。その中のはChromeにありますが、Firefoxにあります。現在、問題のアイテムは実際に構造にオーバーレイされており、構造の直接の子ではありません。しかし、どうやらコードは、それらがオーバーレイしている「日」に関連してアイテムを配置する場所を計算するために、何らかの方法でその構造の高さを読み取る必要があります。そのため、Chromeの内側の高さが高いことが、Chromeに影響を与えている可能性があります（または逆に、の配置がネストの配置に影響を与えています）。divdivfc-day-contentheightdiv170px65pxfc-day-contentdivfc-day-contentaheightfc-day-content

これらのアイテムを配置しているコードはまだ追跡していません。

于 2013-01-25T11:53:17.653 に答える
0

相対配置を使用してみてください: そのような要素の場合

position: relative;
width: 195px;
margin-top: 30px;
float: left;
于 2013-01-25T11:54:52.077 に答える
0

プラグインがカレンダー イベントの位置を間違って計算します。load eventの代わりにカレンダーを初期化することをお勧めしますready。だから交換する

$(document).ready(function() {.....

別れ

$(window).load(function() {.....

進捗状況を確認します。

追加のフィードバックは、BR の調査に役立ちます。

于 2013-01-25T00:07:43.533 に答える