不同浏览器的css显示问题

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

img

谷歌：

img

<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>

方案：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;
}

把width这些设置成百分比

【以下回答由 GPT 生成】

要解决这个显示问题，可以尝试以下几个步骤：

  1. 检查浏览器兼容性问题：首先需要确保所使用的CSS属性和特性在Edge浏览器中也得到支持。可以通过查询各个属性在不同浏览器的兼容性，例如使用Can I Use (https://caniuse.com/) 等工具。如果发现有属性不受支持，可以考虑使用兼容性更好的替代方案或者添加相应的兼容性前缀。

  2. 检查内容溢出问题：有可能是由于组件宽度不足导致最右边的卡片被隐藏。可以检查组件的宽度设置，并确保它足够容纳所有卡片。有时候内容溢出也可能是因为设置了overflow: hidden，这个属性会将溢出的内容隐藏起来。可以尝试将其修改为overflow: visible来看是否解决问题。

  3. 检查浮动问题：在CSS代码中并没有看到明显的浮动属性，但可能其他代码或者样式表中使用了浮动。浮动可能会导致布局问题，特别是在容器大小变化时。可以将浮动属性修改为更稳定的布局方式，如使用flex布局或者grid布局。

  4. 尝试添加CSS重置样式：有时候不同浏览器对默认样式有不同的处理方式，这可能会导致显示问题。可以尝试在页面中添加CSS重置样式，通过重置默认样式来保证在不同浏览器下的一致性。可以使用现有的CSS重置库，如Normalize.css。

  5. 检查图片加载问题：在提供的代码中，图片的src属性为空，这可能是问题的一个关键因素。首先需要确保图片路径正确，并且可以加载成功。可以使用开发者工具查看是否有关于图片加载的错误信息。

如果以上步骤都没有解决问题，那么可能还需要更详细的信息或者代码来进一步分析问题。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^