我用的是vite react typescript 。
我的应用程序组件

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

我的日期选取器组件

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包含工作日的框有奇怪的空格或行b/w它们在chrome中**，但在****firefox中**没有。

我尝试制作容器flexbox、grid。我还尝试将div更改为span，但****它们都不起作用。
下面是代码沙箱链接：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中运行这个沙盒，你会发现不同之处。