开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Chrome bug with contenteditable和list with display:flex

是指在使用Chrome浏览器时，当在一个具有contenteditable属性的元素中使用display:flex属性的列表时，可能会出现一些bug或问题。

具体来说，当一个包含display:flex属性的列表（例如<ul>或<ol>）被放置在一个具有contenteditable属性的元素中时，可能会出现以下问题：

列表项的布局错乱：列表项可能会在水平方向上错位或重叠，导致显示不正确。
列表项的缩进失效：通常情况下，列表项会根据其嵌套层级进行缩进，但在这种情况下，缩进可能会失效，导致列表项没有正确的层级关系。
列表项的宽度问题：列表项的宽度可能无法正确计算，导致列表项的宽度不一致或超出预期。

这个bug可能会影响到使用Chrome浏览器的用户，特别是那些在contenteditable元素中使用了display:flex属性的列表的开发者。

解决这个bug的方法有以下几种：

避免使用display:flex属性：如果可能的话，可以尝试使用其他布局方式来替代display:flex属性，以避免出现这个bug。
使用其他浏览器：由于这个bug是在Chrome浏览器中出现的，可以尝试在其他浏览器中进行测试，看是否存在相同的问题。
寻找其他解决方案：可以尝试寻找其他开发者提供的解决方案或工具，以解决这个bug。

腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储、人工智能等。具体针对这个bug的解决方案，腾讯云没有直接相关的产品或服务。但可以通过腾讯云的云服务器和云数据库等基础设施服务来搭建和部署应用程序，以及通过腾讯云的人工智能服务来进行相关的开发和处理。

腾讯云官方网站：https://cloud.tencent.com/ 腾讯云云服务器产品介绍：https://cloud.tencent.com/product/cvm 腾讯云云数据库产品介绍：https://cloud.tencent.com/product/cdb 腾讯云人工智能产品介绍：https://cloud.tencent.com/product/ai

相关搜索:chrome和firefox中的组合框对齐失败。这个问题似乎是用style.display = "inline".Looking来解决的 CSS :什么时候使用display flex和display inline-block？CSS3 - Flex wrap在iOS10.1.1Safari和Chrome上不起作用 Django Admin: list_display和ImportExport不能同时工作 Flexbox项目在最新的Safari和Chrome中不能包装(在flex-container上使用max-width，在flex-item上使用flex-basis )Flex在chrome和Firefox中的行为不同。IE和Chrome中可能存在的flex布局错误？iPhone (Safari和Chrome都)的位置:修复bug？Safari / Chrome flex-父对象100%高度+填充和100%高度子对象使用M2M中介模型的Django : list_display和视图

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

dropdown list_css中display中flex

–> <mx:Application xmlns:fx=”http://ns.adobe.com/mxml/2009“ xmlns:s=”library://ns.adobe.com/flex.../spark” xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”800″ minHeight=”400″> <fx...label: ‘正则表达式’}]); //获取DropDownList选中元素的索引 public static function getSelectedIndexByResult(list...result:Object):int { var selectedIndex:int=0; try { for (var i:int=0; i < list.length...; i++) { if (list[i][key] == result) { selectedIndex=i; break

3411 0

用最简洁的 CSS 实现 10 种现代布局

前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。...超级居中在没有 flex 和 grid 之前，垂直居中一直不能很优雅的实现。而现在，我们可以结合 grid 和 place-items 优雅的同时实现水平居中和垂直居中。...卡片弹性自适应 justify-content: space-between，结合 grid 和 flex 实现完美的卡片布局。...card { width: clamp(23ch, 50%, 46ch); display: flex; flex-direction: column; padding:....visual { aspect-ratio: 16 / 9; } .ex10 .card { width: 50%; display: flex; flex-direction

9275 2

electron制作聊天界面(仿制qq)

样式使用scss和flex布局这也是制作IM系统的最后一个界面了!...$refs.msgBox.scrollHeight; 内容编辑没有使用表单元素直接使用的 contenteditable 因为contenteditable 没法用双向数据绑定不过可以用数据侦听器...: none; height: 60px; padding-left: 10px; cursor: pointer; display: flex...important; } .mes_box { display: flex; margin-bottom: 10px; margin-top...: flex; align-items: center; .icon { display: inline-block; padding

2.4K3 0

【富文本】268- 富文本原理了解一下？

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...: flex; width: 100%; height: 300px; } .editor { flex: 1; position: relative;...我们执行的是原生的 document.execCommand 方法，浏览器自身会对 contenteditable 这个可编辑区维护一个 undo 栈和一个 redo 栈，所以我们才能执行前进和后退的操作...至此，一个简易版的富文本就完成了（当然了 bug 也是有的?，不过并不妨碍我们理解），具体代码可以参考 npm 上的 pell 包，它已经是个极简版的了。...由于在 chrome 中，失去焦点并不会清除 Seleciton 对象和 Range 对象，所以就像我一开始说的我没怎么去了解?。。。

1.9K4 0

【Web技术】421- 富文本原理介绍

contenteditable 属性假如我们给一个标签加上 contenteditable="true" 的属性，就像这样：那么在这个...: flex; width: 100%; height: 300px; } .editor { flex: 1; position: relative; margin-right...我们执行的是原生的 document.execCommand 方法，浏览器自身会对 contenteditable 这个可编辑区维护一个 undo 栈和一个 redo 栈，所以我们才能执行前进和后退的操作...至此，一个简易版的富文本就完成了（当然了 bug 也是有的?，不过并不妨碍我们理解），具体代码可以参考 npm 上的 pell 包，它已经是个极简版的了。...由于在 chrome 中，失去焦点并不会清除 Seleciton 对象和 Range 对象，所以就像我一开始说的我没怎么去了解?。。。

9632 0

实现元素居中的 10 个CSS方法

absolute + (-margin) 如果元素的宽度和高度已知，我们可以使用至少 3 种方法来使元素居中。例如，在下图中，小猫的宽度和高度分别为 “500px” 和 “366px” 。...于是就有了flex。...flex hello medium </div...grid 像flex一样，grid也可以非常方便地用于使元素居中。...结合 line-height和其他属性使其垂直居中。

4051 0

CSS3弹性盒模型flexbox布局基础版

弹性布局适合于移动前端开发，在Android和ios上也完美支持，所以搞移动的朋友非常有必要认识和使用了。这个属性很久就看到了。...一直在考虑到兼容性问题，没有认真深入，后来又发现在现在现代浏览器中也会出现一些诡异的bug，所以又放弃了。如果考虑到只处理移动方面的，那么兼容性就可以忽略了。...第三种：display:flex，或者其他flex-*的属性，那么你看到的是当前的规范（截止本文发表时间）。...; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .main-content..., otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE

7532 0

你会用到的 15个前端小知识

循环播放 music.onended = function () { music.load(); music.play(); } 7.水平垂直居中我一般只使用两种方式定位或者 flex...: flex; justify-content: center; align-items: center; } 8.隐藏页面元素 display-none: 元素不存在，从 dom...10.contenteditable html 中大部分标签都是不可以编辑的，但是添加了 contenteditable 属性之后，标签会变成可编辑状态。... 不过通过这个属性把标签变为可编辑状态后只有 input 事件，没有 change 事件。...const list = [1, 2, 3]; const listproxy = new Proxy(list, { set(target, property, value) {

9111 0

面试官：对下面的 CSS 题目回答一遍

布局，常用的几个属性值； Flex 布局详解 - Flex布局的常用属性任何东西都可以Flex布局；包括行内元素： display:inline-flex | flex; .box { flex-wrap...值为 layout,content, paint 弹性元素（display: flex|inline-flex）网格元素（display: grid|inline-grid）多容器（column-count...border-collapse: collapse; border-spacing: 0; } normalize.css 保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分HTML元素提供修复浏览器自身的bug...browsers. */ summary { display: list-item; } /* Misc =======================================...: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } 浮动元素的特质和清除浮动的方法

1.3K2 0

移动开发实用

: none} android 2.3 bug @-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉 after和before伪类无法使用动画 border-radius...4.x bug 三星 Galaxy S4中自带浏览器不支持border-radius缩写同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分部分手机(如三星)，a链接支持鼠标...动画，不使用position的left和top来定位利用translate3D开启GPU加速参考《High Performance Animations》 fixed bug ios下fixed元素容易定位出错...;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column...============================== */ .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;

6.4K3 0

Gatsby入门指南—添加博客文章列表（3）

1.查数据 <pre class="md-fences md-end-block" lang="" contenteditable="false" cid="c8" mdtype="fences" style...; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display...1557047446713.png 2.套页面打开index.js <pre class="md-fences md-end-block" lang="" contenteditable="false...; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 0.9em; white-space: pre; display...: 'flex', flexDirection: 'column', alignItems: 'center' }}> { edges.map(edge => { const { frontmatter

4075 0

干货：CSS 专业技巧

: center; align-items: center; display: -webkit-flex; display: flex;} 这还不够？...注意： IE11 对 flexbox 的支持有点 bug。...利用 Flexbox 去除多余的外边距与其使用 nth-， first-，和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性： .list...{ display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;} 列之间的间隙总是均匀相等。...input[type="text"],input[type="number"],select,textarea { font-size: 16px;} :dancer: 支持情况这些技巧适用于最新版的 Chrome

1.5K5 0

CSS容器查询终于来了

} @media (min-width: 800px) { /* Horizontal style. */ .c-article--horizontal { display: flex...@container (min-width: 400px) { .card { display: flex; align-items: center; } } 虽然上述方法可行，...@container card (min-width: 400px) { .card { display: flex; align-items: center; } } 完整代码...: flex; align-items: center; } } 浏览器支持容器查询现在在Chrome 105中得到支持，并很快在Safari 16中得到支持。...代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

4021 0

LayUI实现loading动画和居中显示

解决办法 1、图标居中展示居中展示有很多种方法，可以使用原生的css来实现，但是为了方便和可靠，我直接选择使用flex布局。...title> .mycenter { display: flex...justify-content: center; align-items: center; } 以上，display...指定flex布局，justify-content指定左右居中模式，align-items指定上下居中模式。

5.4K1 0

CSS新规范：样式查询

例如，我们可以检查容器是否有 display: flex，并在此基础上为子元素设计样式。....page-header { display: flex; } @container style(display: flex) { .page-header__start { flex...我们可以使用 not 关键字来检查 figure 是否没有 display: flex。...counter-reset: list; } .article { display: flex; align-items: flex-start; } .article....avatars-wrapper { container-name: avatars; } .avatars-list { display: flex; flex-wrap: wrap;

8873 0

【Python实战】 ---- 爬虫练习爬取 CSDN 2020 博客之星投票数据

查看接口返回结果爬取投票信息爬取数据并保存到 csdn2020.js 文件中引入 requests 和 json 模块；设置常量 url 和 headers ；创建抓取数据的方法 getCSDNBlogStar...= { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome...: -webkit-flex; display: flex; flex-wrap: wrap; } .rui-star-li{ width: 49%;...: -webkit-flex; display: flex; align-items: center; justify-content: center;...margin-top: 0.1rem; } .rui-flex-ac{ display: -webkit-flex; display: flex; align-items

5442 0

5 个 CSS 新功能

通常可以通过在 flex 项目中添加 margin 来解决问题，但是margin的问题在于，它们也会被添加到每个行或列的开头和结尾。...声明 display: flex; 的模块声明 display: grid; 的模块多列布局，由column-count或column-width属性定义在flexbox上下文中，我们可以这里声明...flex 项目之前的间距： .flex-container { row-gap: 10px; column-gap: 15px; } gap属性是row-gap和column-gap的简写。....flex-container { gap: 10px; } 浏览器支持情况 Edge 84+，Firefox 63+，Chrome 84+和Opera 70+当前支持 gap属性。...---- 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

1.6K3 0

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE

js获取div编辑框，textarea，input text的光标位置，兼容FF和IE...") > 0) { OsObject = "Chrome"; } var result = 0; if (!...= "INPUT") { if ($(element).attr("tagName") == "DIV" && $(element).attr("contenteditable") == "true")...onmouseup="getValue(this)" style="display: block" /> <div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true

7.5K6 0

原生JS给可编辑DIV添加文字阴影

给大家分享一个用原生JS给可编辑DIV添加文字阴影的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!...padding: 0; font-family: '微软雅黑', sans-serif; } body { display...: flex; align-items: center; justify-content: center; min-height:...text-shadow: 1px 1px 0px #01d1d3; } <div id="text" contenteditable

11.4K4 0

CSS3之flex兼容写法

是因为w3c从09到现在更新了很多次，所以有一些浏览器只是支持旧语法的书定方式，flex属性有很多种，今天主要说常用的等比设置和居中这两块一、旧语法 .box{ display: -moz-box...; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box; } 2.容器属性 1)box-pack...|| ] /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/ align-self: auto...; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法:...所以上面的兼容写法应该是这样的才对 .box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /*

1.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭