一年前的焦点bug终于找到原因了, 图标文本对齐完美了~

正常来说点击可编辑框末尾空白,光标默认会闪烁在末尾 , 但是闪到了倒数第二个了....当时一直以为js有问题...压根没想到是一个top属性....

虽然transform: translateY(5px);补丁可用 , 不过问题关键点还是对齐问题 , 是时候探个究竟了

数格子可以知道图片在div[contenteditable=true]里面和文字的水平线高4px

CSS深入理解vertical-align和line-height的基友关系找到了答案~

解决办法变得更简单了 , 并且多选不会出现背景断层

然后配合Disable autocorrect / autocompletion in content editable div

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏个人随笔

房上的猫:HTML5基础

一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

471120
来自专栏HTML5学堂

GIF图像转换为多张JPG

HTML5学堂:在JS效果中,有一个使用代码处理多张连续的JPG图像,显示为动态GIF图的效果。于是乎,自己不得不制作多个连续的JPG图片。既然要做素材,也就顺...

30040
来自专栏Coco的专栏

【Web动画】SVG 实现复杂线条动画

23250
来自专栏Petrichor的专栏

Jupyter

When attempt to download .ipynb file as .python file:

73530
来自专栏python3

tkinter -- Pack

pack_salves 打印当前组件包拥有的子组件,通过这个函数可以查看各个组件是否有包含关系

8340
来自专栏听雨堂

MapX中实现友好的交互

        MapX的标注,修改标注功能尽管都有,但都十分的难用,操作起来,用户体验非常糟糕。不光编程难以控制,操作起来也不方便:工具选择要不断的切换,移动...

21070
来自专栏码生

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等

StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle...

57220
来自专栏Micro_awake web

HTML5语义化元素

语义化元素:有意义的元素。 对语义化的理解: 正确的标签做正确的事情; HTML5语义化元素让页面内容结构化清晰; 便于开发人员阅读,理解,维护; 搜索引擎爬虫...

26350
来自专栏非著名程序员

强烈推荐,Android图片处理的超强SDK

今天给大家推荐一个比较好的图片处理SDK,应该对大家有所帮助,最近快春节了,年底太忙了,希望大家见谅,可能推送的内容不及时或者少了些。你们放心,我的口号就是:你...

39970
来自专栏个人随笔

使用ListView控件展示数据

属性名称    说明 items   指定显示那种视图 View   指定显示那种视图 largelmagelist  大图标图像的imagelist控件 Sm...

31070

扫码关注云+社区

领取腾讯云代金券