-1

首先，我不知道这个问题的标题是否合适，但我想不出其他任何事情。如果您有更好的建议，请建议编辑。谢谢你。

我正在开发一个同时使用 Angular Material 和 LumX 库的网页。其他一切在所有浏览器上都运行良好，但是在小屏幕模式下，这段特定的代码片段在 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

如果没有有效的代码片段，我不知道确切的问题。但是正确使用 flex 和 layout 会是

    <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 回答