特定的 HTML 代码片段在特定的 Safari 浏览器上无法很好地呈现答案

【问题标题】：A certain snippet of HTML code does not render well on specifically Safari browsers特定的 HTML 代码片段在特定的 Safari 浏览器上无法很好地呈现
【发布时间】：2016-11-28 16:51:07
【问题描述】：

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

我正在开发一个同时使用 Angular Material 和 LumX 库的网页。其他一切在所有浏览器上都运行良好，但是在 Safari 浏览器（iPhone 和 Mac）上，这个特定的 sn-p 代码无法正常运行在小屏幕模式下。

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

我省略了其余有效的代码。只有这个 sn-p 在 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 显示按钮元素在那里。

我真的是前端开发的新手。知道这里发生了什么吗？它真的会帮助我完成我的项目。谢谢。

【问题讨论】：

标签： html button safari angular-material lumx

【解决方案1】：

如果没有工作代码 sn-p，我不知道确切的问题。但是正确使用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>

【讨论】：