chrome 84.0.4147.105 新版本的样式错误

Question

对于 chrome 版本 84.0.4147.105 =>

如果我为容器 display: block 设置工作正常，则元素在 flex 容器中上升。

这是容器的样式 =>

    position: absolute;
    left: 1254.57px;
    top: 114.8px;
    width: 179.707px;
    height: 378px;
    background: url(assets/images/test.png) 0% 0% / 100% 10% no-repeat rgb(35, 68, 43);
    padding-top: 43.2px;
    font-family: helveti5;
    font-size: 2.3vmin;
    overflow: scroll;
    box-sizing: content-box;
    text-shadow: rgb(0, 0, 0) 0px 5px 3px;
    display: flex;
    flex-direction: column;

容器内的我的样式元素 =>

<div id="123" style="display: inline-table;width:97%;" class="t123"><p style="width:100%;height:6%;
                                  color: #ffffff;
                                  background: #1c2d20;
                                  text-shadow: 0px 5px 3px #000000;
                                  margin: 0;
                                  padding-top: 2.7%;
                                  line-height: 2;
                                  margin-bottom: 0;
                                  text-decoration: none;
                                  ">SOMETHING</p> <p style="width:100%;height:6%;margin-bottom:0;"></p> <p mark="Red" evwin="10" style="padding:4px 2px 4px;height:6%;flex:1;font-size: 1.85vmin;border:solid #71c940 1px;min-width:43%;
                           margin-bottom: 1px;
                           color: white;
                           background: #ff2614;">Red (2) </p><p style="background:#1c2d20;width:100%;height:6%;margin-top:5%;margin-bottom:5%;color:white;"> something </p><p style="background:#1c2d20;width:100%;height:6%;margin-top:5%;margin-bottom:5%;color:white;"> SOmething </p></div>

有无异常修复、检测浏览器版本等的建议吗？

Answer 1

我在这个 Chrome 版本中遇到了同样的问题，对我来说，解决方案是删除子元素中的 min-height。

其他变体是将 style.display 从 flex 切换到 block 父级。

chrome 84.0.4147.105 新版本的样式错误

Style bugs with new version of chrome 84.0.4147.105

css

google-chrome

flexbox

version

margin