浏览器兼容 - contenteditable元素的光标不显示

问题描述

代码如下

<span contenteditable="true"></span>

这句代码在Chrome下光标正常显示，但在Safari中无法显示光标。

解决办法

此时需要设置span的样式如下

span{
	display: inline-block;
	min-width: 1px;
}

分析

Safari下之所以不显示，是因为DOM元素的宽度不够光标显示，光标的宽度为1px，而这里span默认情况下是0px。