如果你仔细看，工作日的盒子之间几乎没有线条或空间。 这些线条或间隙存在于 chrome 中，但不存在于 firefox 中

Question

我正在使用 vite react typescript。

我的应用组件

function App() {
  return (
    <div>
      <DatePicker />
    </div>
  );
}

我的 DatePicker 组件

function DatePicker() {
  return (
    <div className="datepicker-wrapper">
      <input />
      <input />

      <Calendar />
    </div>
  );
}

我的日历组件

function Calendar() {
  return (
    <div className="datepicker-popper">
      <div className="datepicker-weekday">Sunday</div>
      <div className="datepicker-weekday">Monday</div>
      <div className="datepicker-weekday">Tuesday</div>
      <div className="datepicker-weekday">Wednesday</div>
      <div className="datepicker-weekday">Thursday</div>
      <div className="datepicker-weekday">Friday</div>
      <div className="datepicker-weekday">Saturday</div>
    </div>
  );
}

最后是我的 css 文件

body {
  margin: 0;
}

.datepicker-wrapper {
  position: relative;
  font-family: monospace;
  display: flex;
  gap: 2rem;
}

.datepicker-popper {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;

  translate: -50% 100%;

  box-sizing: border-box;
  padding: 0.3rem;
  width: 100%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
}

.datepicker-weekday {
  display: block;
  background-color: palevioletred;
}

check this image包含工作日的框在 chrome中有奇怪的空间或黑白线，但在firefox中没有。

我尝试制作容器 flexbox，网格。 我也尝试将 div 更改为 span 但它们都不起作用。

这是codesandbox链接： https://codesandbox.io/p/sandbox/wonderful-stitch-deoc00?file=%2Fsrc%2Findex.css&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22% 3A31%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A1%7D%5D

尝试在 chrome 和 firefox 中运行这个沙箱。你会看到不同之处。

Answer 1

我认为您只需要使用“normalize.css”文件即可避免在不同的浏览器中出现不同的结果。 您可以从您搜索过的每个站点获取的规范化文件

Answer 2

编辑：从我的角度来看，问题是translate属性。 有一个类似的问题可能解释了为什么会发生这种情况。

---

如果您将flex-wrap: wrap添加到.datepicker-wrapper ，它将允许.datepicker-popper低于输入，您可以摆脱所有导致白线出现的绝对定位和翻译。 它还将使您的代码更具可读性。

这是应用了上述修复程序的代码： https://codepen.io/Aga-KO/pen/RwBqZWq?editors=1100