-1

まず、質問のタイトルが適切かどうかわかりませんが、他に思いつきませんでした。より良い編集がある場合は、編集を提案してください。ありがとうございました。

Angular Material と LumX ライブラリの両方を使用する Web ページに取り組んでいます。他のすべてはすべてのブラウザーで正常に動作しますが、この特定のコード スニペットは、小さい画面モードの Safari ブラウザー (iPhone と Mac の両方) では正しく動作しません。

<md-content flex layout="column">
        <form layout-padding name="newSuperuserForm" flex>
            <span flex layout="column">
                <span flex layout="row" layout-sm="column" layout-xs="column">
                    <span flex="50" flex-sm="100" flex-xs="100" layout="column">
                        <lx-button lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
                        <span flex class="ph-padding-bottom-20"></span>
                        <lx-button lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
                    </span>    
                </span> 
            </span>    
        </form>            
    </md-content>

動作する残りのコードは省略しました。このスニペットのみが Safari ブラウザーで空白にレンダリングされますが、他のブラウザー (Mac の Firefox、Windows の Chrome、Android ブラウザー) では問題なく動作します。

具体的には、何かが 内にある場合div:

<span flex="50" flex-sm="100" flex-xs="100" layout="column"> ... </div>

Safari はそれをレンダリングできます。たとえば、テキストを入力すると、すべて正常に動作します。LumXただし、画面が小さい場合はボタンをレンダリングできません。

ここに画像の説明を入力

このスクリーンショットは、画面サイズが小さい場合に Safari (左) と Firefox (右) でコードがどのようにレンダリングされるかを示しています。

ここに画像の説明を入力

Safari Web Inspector は、ボタン要素がそこにあることを示しています。

私はフロントエンド開発の初心者です。ここで何が起こっているのか分かりますか？プロジェクトを完了するのに本当に役立ちます。ありがとうございました。

4

1 に答える 1

0

機能するコード スニペットがなければ、正確な問題はわかりません。しかし、フレックスとレイアウトの正しい使い方は

    <span flex layout="column">
        <span flex layout="column" layout-gt-sm="row">
            <span flex="100" flex-gt-sm="50" layout="column">
                <lx-button flex lx-type="raised" lx-size="m" lx-color="orange">reset</lx-button>
                <span flex class="ph-padding-bottom-20"></span>
                <lx-button flex lx-type="raised" lx-size="m" lx-color="teal">submit</lx-button>
            </span>    
        </span>
于 2016-11-30T06:18:39.340 に答える