Firefox：CSS 纵横比在 Firefox 中不起作用，但在 Chrome 中起作用

Posted 2023-03-15

【中文标题】Firefox：CSS 纵横比在 Firefox 中不起作用，但在 Chrome 中起作用

【英文标题】：Firefox: CSS aspect ratio doesn't work in Firefox but does in Chrome

【发布时间】：2021-08-20 15:35:23

【问题描述】：

我在我的应用程序中使用display: grid。我希望网格项始终是方形的，因此，我给它们的纵横比为 1/1。在 Chrome 中，这按预期工作，但在 Firefox 中，纵横比代码似乎没有任何改变。我已经评论了这条线，看看这是否对 Firefox 有影响，它没有，但它在 Chrome 中。

我正在使用样式化组件来设置网格和网格项的样式。我的问题是因为样式组件或 CSS 与 Firefox 缺乏兼容性吗？如果有人能帮我解决这个问题，我将不胜感激。我已经研究过这个问题，但找不到任何显示修复的地方，我认为这是因为 CSS 的纵横比还是很新？

此外，该应用可以在 Mac 上的 Safari、Windows 笔记本电脑上的 Microsoft Edge 和 android 上的 Google Chrome 上正常工作。

我的代码...

网格组件样式

    export const StyledGrid = styled.div`
  width: calc(100% - 8rem);
  margin: 1rem 4rem;
  h3 
    font-size: 1.6rem;
  

  // grid things
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;

  // Grid and font sizing media queries
  @media (min-width: 1502px) 
    h3 
      font-size: 1.8rem;
    
  
  @media (max-width: 1326px) and (min-width: 1300px) 
    grid-row-gap: 6rem;
  
  @media (max-width: 1089px) 
    grid-template-columns: repeat(auto-fit, minmax(12.75rem, 1fr));
    grid-row-gap: 6rem;
    h3 
      font-size: 1.4rem;
    
  
  @media (max-width: 749px) 
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    grid-row-gap: 5.5rem;
    h3 
      font-size: 1.3rem;
    
  
  @media (max-width: 624px) 
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-row-gap: 5rem;
  
  @media (max-width: 494px) 
    grid-row-gap: 4rem;
  

  @media (max-width: 410px) 
    grid-row-gap: 3.25rem;
    grid-template-columns: repeat(2, minmax(5rem, 1fr));
    h3 
      font-size: 1.2rem;
    
  

  @media (max-width: 346px) 
    h3 
      font-size: 1.1rem;
    
  
  @media (max-width: 331px) 
    h3 
      font-size: 1rem;
    
  

  @media (max-width: 319px) 
    grid-row-gap: 3rem;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  

  // Grid column gap and margin media queries

  // Media queries
  @media (max-width: 1009px) 
    grid-column-gap: 6rem;
  
  @media (max-width: 729px) 
    grid-column-gap: 4rem;
  
  @media (max-width: 391px) 
    grid-column-gap: 3rem;
  
  @media (max-width: 370px) 
    grid-column-gap: 2rem;
  
  @media (max-width: 1299px) 
    margin: 3.25rem 4rem;
  
  @media (max-width: 650px) 
    margin: 3.25rem 2rem;
    width: calc(100% - 4rem);
  
  @media (max-width: 391px) 
    margin: 3.25rem 2rem 3.25rem 1.5rem;
    width: calc(100% - 3rem);
  
  @media (max-width: 370px) 
    margin: 3.25rem 1.5rem 3.25rem 1rem;
    width: calc(100% - 2rem);
  
`;

网格项组件样式...

const StyledRecord = styled.div`
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;

  img 
    border-radius: 1rem;
    height: 100%;
    width: 100%;
    object-fit: cover;
  

  h3 
    margin-top: 0.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.63%;
    color: $(props) => (props.theme === "light" ? "#343434" : "white");
  
`;

【问题讨论】：

你的 Firefox 是最新的吗caniuse.com/mdn-css_properties_aspect-ratio

@Paulie_D 感谢您的回复！我的 Firefox 是最新的，但你说这让我找到了问题所在。谢谢

【参考方案1】：

知道了！我所要做的就是删除图像的高度定义，这解决了我的问题。一定与 Firefox 处理与 Chrome 不同的样式的方式有关。

const StyledRecord = styled.div`
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;

  img 
    width: 100%;
    border-radius: 1rem;
    aspect-ratio: 1/1;
    object-fit: cover;
  

  h3 
    margin-top: 0.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.63%;
    color: $(props) => (props.theme === "light" ? "#343434" : "white");
  
`;