【问题标题】：CSS don't work properly in Chrome / Edge, but do in FirefoxCSS 在 Chrome / Edge 中无法正常工作，但在 Firefox 中可以
【发布时间】：2022-08-05 15:37:52
【问题描述】：

伪元素，例如在 Chrome 中未正确定位

的HTML：

<table id=\"new_ar_wrp\">
  <tr class=\"new_ar_wrp_tr_has_timer\" data-month=\"7\" data-meta=\"s\" style=\"color: rgb(249, 109, 66);\">

    <td>
      <input class=\"new_ar_wrp_tr\" type=\"text\" value=\"blablabla\" readonly=\"readonly\">
    </td>

  </tr>
</table>

（html由javascript生成并动态插入）

对应的CSS：

#new_ar_wrp > tr > td > input,{
  box-sizing: border-box;
  padding: 5px;
  padding-right: 5px;
  background: transparent;
  color: #aaa;
  border: none;
  border-bottom-color: currentcolor;
  border-bottom-style: none;
  border-bottom-width: medium;
  border-bottom: 1px solid;
  margin-bottom: 10px;
  font-size: 17px;
  padding-right: 12px;
  width: 265px;
}

.new_ar_wrp_tr_has_timer > td:nth-child(1) {
padding-left: 10px;
}
.new_ar_wrp_tr_has_timer > td:nth-child(1)::after  {
  content: \'\';
  background-color: rgb(249, 109, 66);
  position: absolute;
  width: 5px;
  height: 30px;
  left: 0;
  border-radius: 10px;
}

这可能是什么原因？

编辑

请显示该问题的正确minimal reproducible example，而不仅仅是缺少上下文的sn-p。
当我在 Chrome 中测试它时，jsfiddle.net/d9obLex6 呈现的效果与您的第一张图片显示的大致相同。
我已经在 WINdows10 上的 Chrome/Edge 和 Firefox 上运行了你的代码，它们都显示了相同的结果，它们都与你的图像中的不同（橙色条纹比你的 FF 图片低一点）。你在什么操作系统上？还可以尝试设置顶部和左侧位置，看看会发生什么。
开发。在 Linux (Firefox) 上，但用户使用 Win.10 和 Edge/Chrome。
我无法重现该问题。它在 Edge、Chrome 和 Firefox 中看起来是一样的：i.stack.imgur.com/z9t92.png。您使用的是哪个版本的 Edge 和 Chrome？您需要提供一个可以复制问题。

标签： css google-chrome microsoft-edge

【解决方案1】：

浏览器如何渲染内容将根据其引擎而有所不同。 Chrome 和 Edge 共享相同的 webkit 引擎。我不是浏览器规范方面的专家，所以不能对此发表更多评论。

但是当涉及到您的错误时，我认为您正在尝试将 ::after 与 td 对齐，因此您应该添加相对于 .new_ar_wrp_tr_has_timer > td:nth-child(1) 的位置来做到这一点发生。

还要为 ::after 指定 top 属性。您将由浏览器决定不指定它。我认为顶部：0；适合您的情况。

还应该全局声明 box-sizing ，而不是像下面这样为每个元素声明

*, *::before, *::after {
box-sizing: border-box;
}

【讨论】：