不同浏览器的css显示问题

Question

在开发一个页面时，在组件中一行可以生成4个卡片。在edge浏览器中最右边的的却不显示。但是在谷歌浏览器中可以正常显示，以下是css代码和图片。ps.原本在edge也是可以正常显示的，后来我把侧边栏收起来后在打开就出现这个问题了。
edge:

谷歌：

<style scoped>
.card-container {
  display: flex; /* 使用 'grid' 来进行网格布局也可以 */
  flex-wrap: wrap; /* 当容器宽度不足时，卡片会换行显示 */
  background: linear-gradient(135deg, #9796f0, #fbc7d4);
  /* 添加渐变色作为背景 */
  /*backdrop-filter: blur(10px);*/
  /* 添加磨砂效果 */

}


.card {
  width: 300px; /* 根据需要设置卡片宽度 */
  height: 100px;
  /* 设置卡片之间的间距 */
  display: flex;
  border: 1px solid #ccc; /* 为每个卡片添加边框 */
  border-radius: 50px;
  /* 添加边框阴影 */

  background-color: rgba(255, 255, 255, 0.8);
  /* 添加磨砂感 */
  backdrop-filter: blur(6px) brightness(0.8);

  position: relative; /* 添加相对定位 */
  transition: box-shadow 0.3s, transform 0.3s; /* 添加过渡效果 */
  cursor: pointer;
  margin: 30px 10px 5px 15px;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影效果 */
  transform: translateY(-5px); /* 鼠标悬停时产生浮动效果 */
}

.card-content {
  display: flex;
  align-items: center; /* 垂直居中图片和文字 */
}

.left-content {
  width: 100px; /* 设置左侧内容容器的固定宽度 for the image */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image {
  width: 100px; /* 设置图片的固定宽度 */
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s; /* 添加过渡效果 */
}

.right-content {
  flex: 1; /* Let the right content take the remaining space */
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* To separate h3 and p with space between them */
}

.divider {
  border-bottom: 1px solid #ccc; /* You can adjust the color and size as needed */
  margin: 8px 0; /* Add some margin above and below the divider for spacing */
}

.add-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: green;
  cursor: pointer;
  opacity: 0; /* 初始时设置透明度为0，不显示+符号 */
  transition: opacity 0.3s; /* 添加过渡效果 */
}

.card:hover .add-icon {
  opacity: 1; /* 鼠标悬停时显示+符号 */
}


</style>

Answer 1

方案：CSS Flexbox和Grid布局

.card-container {
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 10px));
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #9796f0, #fbc7d4);
  backdrop-filter: blur(6px) brightness(0.8);
  justify-content: space-between;
}