Chrome忽略CSS Grid布局设置，如何实现与Firefox一致的显示效果？

这个问题的核心在于不同浏览器对<button>元素作为Grid容器的解析逻辑存在差异。虽然Chrome官方支持CSS Grid，但表单控件（比如button）的内部布局在浏览器中有特殊实现逻辑，导致你的Grid规则没有在Chrome中正确生效。

解决方案：用内部容器包裹内容 #

我们可以在button内部新增一个<div>作为专属Grid容器，把所有商品内容放到这个div里，让button只负责提交功能和外层样式，这样就能保证跨浏览器的布局一致性。

修改后的HTML（cart.php）

<form action="singleproduct.php" method="post" class="cart">
  <button type="submit" name="prod" value="<?php echo $tobuy['ProductID'] ?>" class="cartitem">
    <!-- 新增的Grid容器div -->
    <div class="cart-item-content">
      <img src="<?php echo "http://$_SERVER[HTTP_HOST]/WebApplications/productImages/" . $tobuy['PictureLocation']?>"></img>
      <p id="name"> <?php echo $tobuy['ProductName'] ?> </p>
      <p id="make"> <?php echo $tobuy['Make'] ?> </p>
      <p id="cost"> <i>Cost : $<?php echo $tobuy['Cost'] * $tobuy['quantity'] ?> </i> </p>
      <p id="quty"> Quantity : <?php echo $tobuy['quantity'] ?> </p>
    </div>
  </button>
</form>
<form action="cart.php" method="post" class="delete">
  <button type=submit name="delete" value="<?php echo $tobuy['ProductID']?>"> Remove item </button>
</form>

修改后的CSS（styles.css）

/* 保留button的外层样式，移除Grid相关属性 */
form.cart > .cartitem{
  grid-column: 1/7;
  width: 100%;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 30px black;
  background: linear-gradient(#a7321f, #3d1111);
  border: none; /* 去掉默认按钮边框 */
  cursor: pointer;
}

/* 把Grid布局规则转移到新增的div上 */
.cart-item-content {
  display: grid;
  grid-template-areas: 
    "image name" 
    "image make" 
    "image cost" 
    "image quty";
  grid-template-columns: 200px auto;
  grid-column-gap: 20px;
  text-align: left;
}

/* 调整后代选择器，指向div内的元素 */
form.cart > .cartitem > .cart-item-content > img {
  grid-area: image;
  object-fit: cover;
  height: 200px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0 20px black;
}

form.cart > .cartitem > .cart-item-content > p#name{
  grid-area: name;
  font-size: 20px;
  font-weight: 300;
}

form.cart > .cartitem > .cart-item-content > p#make{
  grid-area: make;
  font-size: 25px;
  font-weight: 500;
}

form.cart > .cartitem > .cart-item-content > p#cost{
  grid-area: cost;
  font-size: 20px;
  font-weight: 300;
}

form.cart > .cartitem > .cart-item-content > p#quty{
  grid-area: quty;
  font-size: 15px;
}

原理说明 #

<button>作为表单交互控件，浏览器为了保证其可用性（比如点击区域、焦点状态等），对其内部布局做了特殊处理，导致Grid布局在Chrome中没有按预期生效。而<div>是通用的块级容器，所有浏览器对其Grid布局的解析规则完全一致，这样就能让你的布局在Chrome和Firefox中表现完全相同。

内容的提问来源于stack exchange，提问作者ENBYSS