button 使用 flex 布局的兼容性问题

2020-01-07 16:00:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

button 使用 flex 布局的兼容性问题

button 使用 flex 布局的兼容性问题

在低版本的手机系统中,我们发现 button 不能够作为 flex 容器,即使在 CSS 中指定了 display: flex 且 autoprefixer 也已经转换成兼容属性,也还是不起作用。具体表现在其内容并不能使用 flex 布局对齐,比如说居中。

这里的背景是,我们经常需要展示一些按钮,用户可点击执行特定的操作。如果只是简单把 div 写成按钮的样子,里面直接写文本的话,会产生至少两个问题: 1. 语义和无障碍都不够友好; 2. 低版本手机文本节点不能对齐。

<div class="btn">
    我是一个按钮
</div>
.btn {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
}

为了解决第一个问题,我们直接使用标准的 button 标签即可。不考虑使用 a 标签原因是既要处理默认的点击行为,也要为了 a11y 指定 WAI-ARIA 的 role="button" ,按钮数量多了之后写起来就比较烦人。而对于第二个问题,我们一般可把按钮的内容(这里只有一个文本节点)包裹在 span 里。

<button class="btn">
    <span>我是一个按钮</span>
</button>
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    
    & > span {
        color: #fff;
    }
}

但上面这种方案,经过测试发现在低版本系统上还是有问题,文本并没有被居中!这个时候我们可以选择把 span 设为 width: 100% 并设置文本居中属性 text-align: center ,但这种方法相当于放弃了 flex 布局,转而使用了传统的对齐方案。而且既然水平方向的 flex 排版不起作用,我们也不能期望垂直方向的也能正常工作。

经过搜索,我们发现 ionic-team/ionic#5310 提供了一种方案,原来的 button 还是保持 block 的显示布局不变,将 flex 布局的属性设置在里面的 span 元素上。经测试,这种方案在我们需要兼容的机型( and 4.4.4+ / iOS 8.4+ )上都能正常工作。

.btn {
    display: inline-block;
    
    & > span {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }
}

该方案一直被 ionic 项目沿用至今,我目前看到的代码位于 button.scss#L43 #L241 。反查资料可知这是 flex box 在早期浏览器实现的 bug ,并早已有人给出了 workaround ,详见 Flexbug #9 - Some HTML elements can't be flex containers

2020 年了,希望大家都能往小康冲刺,都能换上更好更新的手机,也希望 Web 前端能够尽早摆脱对较低版本浏览器内核的兼容吧。


原文链接:https://www.cnblogs.com/BlackStorm/p/12163153.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何自学计算机前端开发?精细的自学步骤是什么样的?

下一篇:10个超好用的配色网站