一年前的焦点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)...

36912
来自专栏码生

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

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

1552
来自专栏非著名程序员

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

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

2227
来自专栏Petrichor的专栏

Jupyter

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

3813
来自专栏HTML5学堂

GIF图像转换为多张JPG

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

2574
来自专栏Petrichor的专栏

图像处理: RGB颜色值 & 十六进制颜色码 速查表

1343
来自专栏一场梦

PHP头像九宫格合并 案例

1317
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(5)---数据处理

使用表单的API处理数据 你可以将数据以有格式或无格式字符串或者数据对象的形式填充到单元格中。将数据填充到单元格的最好方式取决于你想添加字符串数据还是数据对象,...

1799
来自专栏python3

tkinter -- Grid

实现机制是将 Widget 逻辑上分割成表格,在 指定的位置放置想要的 Widget 就可以了

793
来自专栏个人随笔

使用ListView控件展示数据

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

2617

扫码关注云+社区