我有一个页面试图以div显示购物车中的所有商品。为简单起见,我将隐藏所有不相关的php
代码,并仅显示与样式问题相关的行:
cart.php
<form action="singleproduct.php" method="post" class="cart">
<button type="submit" name="prod" value="<?php echo $tobuy['ProductID'] ?>" class="cartitem">
<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>
</button>
</form>
<form action="cart.php" method="post" class="delete">
<button
type=submit
name="delete"
value=<?php echo $tobuy['ProductID'] ?>>
Remove item </button>
</button>
</form>
styles.css
form.cart > .cartitem{
grid-column: 1/7;
width: 100%;
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;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 30px black;
background: linear-gradient(#a7321f, #3d1111);
}
form.cart > .cartitem > img {
grid-area: image;
object-fit: cover;
height: 200px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0 20px black;
}
form.cart > .cartitem > p#name{
grid-area: name;
font-size: 20px;
font-weight: 300;
}
form.cart > .cartitem > p#make{
grid-area: make;
font-size: 25px;
font-weight: 500;
}
form.cart > .cartitem > p#cost{
grid-area: cost;
font-size: 20px;
font-weight: 300;
}
form.cart > .cartitem > p#quty{
grid-area: quty;
font-size: 15px;
}
据我所知,Chrome与CSS Grid完全兼容。我使用的是v65,而this website表示它应该有效。但是,这是它在Firefox中的样子:
以下是Chrome浏览器的外观:
网格应该是2列4行,如css
和firefox
所示,但是在Chrome浏览器中由于某种原因,只有6列网格,没有行。
有没有办法让我的网页在Chrome中与在Firefox中看起来一样?