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 前端能够尽早摆脱对较低版本浏览器内核的兼容吧。
上一篇: Task04列表、元组和字符串
下一篇: keras导入weights方式
推荐阅读
-
对于flex布局的使用心得
-
使用Map标签指定点击区域时的兼容性问题
-
浅析一个MYSQL语法(在查询中使用count)的兼容性问题_MySQL
-
button 使用 flex 布局的兼容性问题
-
flex布局换行空白间隙之align-content的使用
-
使用Flex布局实现头部固定内容区域滚动的方法
-
flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose
-
flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose
-
浅析一个MYSQL语法(在查询中使用count)的兼容性问题_MySQL
-
.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)_html/css_WEB-ITnose