HTML 按钮在具有相同 CSS 的 2 个页面上显示非常不同

Question

我有两个网页 - 一个是产品列表页面：

/*BUTTON STYLE*/

button {
  background-color: #132257;
  color: white;
  border: 0.25em solid white;
  cursor: pointer;
  width: 100%;
  height: 90%;
}


/*PRODUCT LISTINGS PAGE*/

.shoplayout {
  grid-area: MC;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "filters listing";
}

.filters {
  grid-area: filters;
}

.listing {
  grid-area: listing;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75em;
}

.product {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  border: 0.125em solid #1b2493;
}

.product>* {
  height: 8vh;
  line-height: 8vh;
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.product div:nth-child(even) {
  /*Every second div within a product has the same background*/
  background-color: lightsteelblue;
}

.productbuy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  border: none;
}

.productpic {
  grid-row: 1;
  padding: 0;
  border: none;
  display: flex;
  justify-items: center;
  height: 20vh;
}

.productpic>img {
  /*https: //whosebug.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
  max-width: 100%;
  max-height: 100%;
}


/*PRODUCT DETAILS PAGE*/

.productdetails {
  grid-area: MC;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 1em;
}

.productdetails>* {
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.picdetail {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-color: cornsilk;
  justify-items: center;
  border: none;
}

.picdetail img {
  max-width: 100%;
  max-height: 100%;
}

.productnumbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

<!-- CONTENT -->
<div class="content" id="elemToSlide">
  <div class="shoplayout">
    <div class="listing">
      <!--ALL PRODUCTS IN HERE-->
      <div class="product">
        <div>Ch. BonPlonque, 2019</div>
        <div>Bordeaux, France</div>
        <div>Crisp fresh white</div>
        <div>3.21/5, 3 reviews</div>

        <!--DISPLAY AS A 4 COL INNER GRID-->
        <div class="productbuy">
          <div>&euro;15.95</div>
          <div>Stock: 5</div>
          <div><button>Buy</button></div>
          <div>Qty</div>
        </div>
      </div>

      <!--END LISTING COLUMNS-->
    </div>

    <!--END SHOP CONTENT-->
  </div>

一个是产品详情页面：

/*BUTTON STYLE*/

button {
  background-color: #132257;
  color: white;
  border: 0.25em solid white;
  cursor: pointer;
  width: 100%;
  height: 90%;
}


/*PRODUCT LISTINGS PAGE*/

.shoplayout {
  grid-area: MC;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-areas: "filters listing";
}

.filters {
  grid-area: filters;
}

.listing {
  grid-area: listing;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75em;
}

.product {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  border: 0.125em solid #1b2493;
}

.product>* {
  height: 8vh;
  line-height: 8vh;
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.product div:nth-child(even) {
  /*Every second div within a product has the same background*/
  background-color: lightsteelblue;
}

.productbuy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  border: none;
}

.productpic {
  grid-row: 1;
  padding: 0;
  border: none;
  display: flex;
  justify-items: center;
  height: 20vh;
}

.productpic>img {
  /*https: //whosebug.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
  max-width: 100%;
  max-height: 100%;
}


/*PRODUCT DETAILS PAGE*/

.productdetails {
  grid-area: MC;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 1em;
}

.productdetails>* {
  border-bottom: solid 0.02em #1b2493;
  padding-left: 0.25em;
}

.picdetail {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-color: cornsilk;
  justify-items: center;
  border: none;
}

.picdetail img {
  max-width: 100%;
  max-height: 100%;
}

<!--,GRID CELL 5, 2 - DISPLAYS AS A 4 COL INNER GRID-->
<div class="productbuy">
  <div>&euro;15.95</div>
  <div>Stock: 5</div>
  <div><button>Buy</button></div>
  <div>Qty</div>
</div>

除了标题为“购买”的按钮外，几乎所有内容都按我的意愿显示：

.productbuy 元素的 HTML 在这两种情况下是相同的，CSS 在这两种情况下是相同的 9 除了第 n 个 child background-color) , 按钮样式适用于整个网站，所以我很困惑为什么会这样。

非常感谢收到所有建议。

Answer 1

问题不在于你的样式，按钮工作正常但在详细信息页面上你的按钮样式是根据 div 父级更改 div 父级样式

Answer 2

感谢 MD Code 和 Andrea，他们发现父容器一定有问题。第二种情况，商品详情页，页面结构中少了一个div，两个页面的CSS有点乱。

所以我整理了一下，现在一切正常。

产品详细信息页面 HTML 现在是：

<!-- CONTENT -->
<div class="content" id="elemToSlide">
                
    <!--DETAIL LAYOUT-->
    <div class="detailslayout">

        <!--A WINE-->
        <div class="detailspic">
            <img src="images/products/winehorizontallarge.png" />
        </div>

        <div>Name and vintage</div>
        <div>Origin</div>
        <div>Description</div>
        <div>Reviews</div>
        <div>Grapes</div>
        <div>Producer</div>
        <div class="detailsnumbers">
           <div>TA</div>
           <div>pH</div>
           <div>RS</div>
           <div>ABV</div>
        </div>

        <div class="productbuy">
           <div>&euro;15.95</div>
           <div>Stock: 5</div>
           <div><button>Buy</button></div>
           <div>Qty</div>
        </div>
        <!--END WINE-->
    </div>
    <!--END DETAIL LAYOUT-->
                
</div>
<!--END CONTENT-->

放入div“DetailsLayout”意味着页面结构正确；然后我整理了 CSS:

/*LAYOUT FOR THE PLP*/
.shoplayout {
    grid-area: MC;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "filters listing";
    }

/*LAYOUT FOR THE PDP - THIS WAS MISSING PREVIOUSLY*/
.detailslayout {
    grid-area: MC;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 1em;
    }

.detailslayout > * {
        height: 8vh;
        line-height: 8vh;
    }

.products {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    border: 0.125em solid #1b2493;
    }

.products > * {
    height: 8vh;
    line-height: 8vh;
    border-bottom: solid 0.02em #1b2493;
    padding-left: 0.25em;
    }

.products div:nth-child(even) {
    background-color: lightsteelblue;
    }

.productbuy {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    border: none;
    background-color: lightsteelblue;
    }

.productpic {
    grid-row: 1;
    padding: 0;
    border: none;
    display: flex;
    justify-items: center;
    height: 20vh;
    }

.productpic  img, .detailspic img {
    max-width: 100%;
    max-height: 100%;
    }

.detailspic {
    grid-column: 1 / span 2;
    grid-row: 1 ;
    background-color: cornsilk;
    justify-items: center;
    border: none;
    height: 20vh;
    }

.detailsnumbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    }

现在，两个页面上的按钮在 PLP 上以相同的方式呈现：

在 PDP 上：

感谢大家的帮助，

德莫特

HTML 按钮在具有相同 CSS 的 2 个页面上显示非常不同

HTML button displays very differently on 2 pages with same CSS

html

css

button