Google Chrome では、要素間にスペースがある場合、またはコンテンツが中央揃えで配置される場合に問題が発生します。 Firefox、IE11、Edge、Safari では要素は常に下に展開されるため、これは問題になりません。気になるのは、Chrome の動作は特定の規範に従っているのかということです。もしそうなら、どれですか?そうでない場合、なぜ Chrome でそれを行うのでしょうか? （個人的な意見ですが、クリックトリガーがランダムに画面外に消えるのはひどいユーザーエクスペリエンスです。）何らかの方法で Chrome の動作を変更または無効にすることは可能ですか?例えば。合格

Google Chrome は Flexbox ビューポートを使用して展開方向を固定します-PHP中国語ネットワークQ&A

<p>Google Chrome で、<code>スペース</code Expand/collapse> または <em>隣接</em> Flex アイテムを持つ Flexbox コンテナ内に要素を配置すると問題が発生します。 code>center</code> ビューポートに対してコンテンツをさまざまな方向に揃えます。 </p> <p>Firefox、IE11、Edge、または Safari では、要素は常に下に展開されるため、これは問題になりません。 </p> <p>興味があります:</p>

<li>Chrome は特定の仕様に従って動作しますか?もしそうなら、どれですか? </li> <li>そうでない場合、なぜ Chrome でそれを行うのでしょうか? (私見ですが、画面外にランダムに消えるトリガーをクリックするのはひどいユーザーエクスペリエンスです。) </li> <li>何らかの方法で Chrome の動作を変更または無効にすることはできますか?例えば。 CSS またはメタタグ経由ですか? </li> </ul> <p><strong>更新 1: 可能であれば、Chromium 開発者からの洞察/説明を求めるために、Chrome バグトラッカーに問題 #739860 を送信しました。 </strong></p> <時間> <p>2 つの例を以下に挿入します。問題を説明する完全なテストスイートは、このペンで見つけることができます: https://codepen.io/jameswilson/full/xrpRPg/ この例では、展開/折り畳みの動きがアニメーション化されて目を引くように、 SlipToggle を使用することにしました。同じ動作が詳細タブでも発生しますが、クロスブラウザーはまだサポートされておらず、展開/折りたたみがあまりにも不安定です。</p> <p><strong>例 1:Chrome 针对齐 Flexbox 間の空格の展示/折叠行は</strong></p> <p> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).next().slideToggle(); })</pre> <pre class="brush:css;toolbar:false;">body { マージン: 30px; フォントファミリー: サンセリフ; } それはさておき、ディビジョンはさておき、まとめ、主要、ボタン、詳細ページ、ボタンP { 背景: rgba(0,0,0,.09); 境界線: なし。パディング: 20px; マージン: 0; } .flexcontainer { ディスプレイ: フレックス; } 脇に{ フレックス: 1; 位置: 相対的; 最大幅: 25%; 背景: ミントクリーム。ディスプレイ: フレックス; フレックス方向: 列; 位置: 相対的; } 脇に.スペース{ コンテンツの位置揃え: 間のスペース; } 余談.センター { コンテンツの位置揃え: 中央; } 主要 { フレックス: 3; 位置: 相対的; 最大幅: 75%; 背景: アリスブルー; 垂直配置: 上; 高さ: 100%; } メイン > * * { マージントップ: 20px; } ボタンP { 表示: なし。 }</pre> <pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</スクリプト> <セクションクラス="フレックスコンテナ"> <aside class="space-between"> <div>上部サイドバー</div> <div>下部サイドバー</div> </余談> <メイン> <div> <button>slideToggle</button> <p>その他のブラウザ: 常に下に展開されます。<br> Chrome: トップサイドバーは常に表示されるため、常に下に展開する必要があります。</p> </div> <div> <button>slideToggle (通常は下に展開します)</button> <p>その他のブラウザ: 常に下に展開されます。<br> Chrome: 下部サイドバーと上部サイドバーの両方が表示されている間、下に展開する必要があります。ただし、トップサイドバーが画面外になるまで下にスクロールすると、上に拡大されます。</p> </div> <div> <button>slideToggle (通常は下に展開します)</button> <p>その他のブラウザ: 常に下に展開されます。<br> Chrome: 下部サイドバーと上部サイドバーの両方が表示されている間、下に展開する必要があります。ただし、トップサイドバーが画面外になるまで下にスクロールすると、上に拡大されます。</p> </div> </メイン> </section></pre> </p> <p><strong>例 2:Chrome 对居中对齐の Flexbox の展示/折叠行は</strong></p> <p> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).next().slideToggle(); })</pre> <pre class="brush:css;toolbar:false;">body { マージン: 30px; フォントファミリー: サンセリフ; } それはさておき、ディビジョンはさておき、まとめ、主要、ボタン、詳細ページ、ボタンP { 背景: rgba(0,0,0,.09); 境界線: なし。パディング: 20px; マージン: 0; } .flexcontainer { ディスプレイ: フレックス; } 脇に{ フレックス: 1; 位置: 相対的; 最大幅: 25%; 背景: ミントクリーム。ディスプレイ: フレックス; フレックス方向: 列; 位置: 相対的; } 脇に.スペース{ コンテンツの位置揃え: 間のスペース; } 余談.センター { コンテンツの位置揃え: 中央; } 主要 { フレックス: 3; 位置: 相対的; 最大幅: 75%; 背景: アリスブルー; 垂直配置: 上; 高さ: 100%; } メイン > * * { マージントップ: 20px; } ボタンP { 表示: なし。 }</pre> <pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</スクリプト> <セクションクラス="フレックスコンテナ"> <aside class="center"> <div>中央サイドバー</div> </余談> <メイン> <div> <button>slideToggle (通常は下に展開します)</button> <p>その他のブラウザ: 常に下に展開されます。<br> クロム：通常は下に展開します。コンテナの上端がビューポートからスクロールアウトすると、両方向に展開されます。</p> </div> <div> <button>slideToggle</button> <p>その他のブラウザ: 常に下に展開されます。<br> クロム：通常は下に展開します。コンテナの上端がビューポートからスクロールアウトすると、両方向に展開されます。</p> </div> <div> <button>slideToggle (通常は下に展開します)</button> <p>その他のブラウザ: 常に下に展開されます。<br> クロム：通常は下に展開します。コンテナの上端がビューポートの外にスクロールすると両方向に拡大しますが、中央のサイドバーがスクロールしてビューポートの外に出ると再び下方向に拡大を再開します。</p> </div> </メイン> </section></pre> </p>