Question

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

我正在开发一个同时使用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显示按钮元素在那里。

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

Answer 1

如果没有正常运行的代码段，我不知道确切的问题。但正确使用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>

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

1 个答案: