<a> tag showing as a different size on chrome and firefox

Question

My issue is with this code here, you can view it at lapismc.net. for whatever reason it displays differently in chrome than it does in Firefox.

The "w-" classes are from CandyUI.css. The popup-button classes are below.

.popup {
    height: 170px;
    min-height: 170px;
    background-color: #244753;
    border-top: 5px black;
    box-shadow: black 0 -1px 3px 0, black 0 1px 3px 0;
    }

    .popup-container {
    height: 120px;
    }

    .popup-para {
    font-family: Raleway, sans-serif;
    color: white;
    font-size: 16px;
    }

    .popup-button {
    width: 250px;
    margin-left: 7px;
    font-family: Raleway, sans-serif;
    color: white;
    font-weight: 400;
    text-align: center;
    }

    .popup-button.youtube {
    background-color: #5069ed;
    }

    .popup-button.youtube:hover {
    background-color: #4259c0;
    }

    .popup-button.facebook {
    background-color: #3973ed;
    }

    .popup-button.facebook:hover {
    background-color: #3062ce;
    }

    .popup-button.forums:hover {
    background-color: #2776bb;
    }

<div class="w-section w-hidden-medium w-hidden-small w-hidden-tiny popup">
        <div class="w-container popup-container">
            <h1 class="heading white popup-title">Keep Updated</h1>
            <p class="popup-para">Check out our Media Portals</p>
            <a href="https://lapismc.net/facebook" class="w-button popup-button facebook">Visit our Facebook Page</a>
            <a href="mailto:contact@lapismc.net" class="w-button popup-button youtube">Send us an Email</a>
            <a href="https://lapismc.net/discord" target="_newtab" class="w-button popup-button forums">Join our Discord Server</a>
        </div>
    </div>

    

The buttons display like this in chrome

and like this in firefox and edge

Any and all help is appreciated, please keep in mind that I am primarily a Java developer and have limited knowledge of CSS. Thanks.

Answer 1

我会包装三个按钮并使用flexbox。我也在窄设备上使它们全宽。这是一个例子。这是一个概念证明。如果您需要帮助将其应用到您的代码中，请考虑在问题中添加实时代码段，以重现问题。

＆＃13;

＆＃13;

.popup {
  height: 170px;
  min-height: 170px;
  background-color: #244753;
  border-top: 5px black;
  box-shadow: black 0 -1px 3px 0, black 0 1px 3px 0;
  display: inlin-block;
}

.popup-container {
  height: 120px;
}

.popup-para {
  font-family: Raleway, sans-serif;
  color: white;
  font-size: 16px;
}

.popup-button {
  margin: 0 0 7px 7px;
  font-family: Raleway, sans-serif;
  color: white;
  font-weight: 400;
  text-align: center;
}

.popup-button.youtube {
  background-color: #5069ed;
}

.popup-button.youtube:hover {
  background-color: #4259c0;
}

.popup-button.facebook {
  background-color: #3973ed;
}

.popup-button.facebook:hover {
  background-color: #3062ce;
}

.popup-button.forums {
  background-color: #3585ee;
}

.popup-button.forums:hover {
  background-color: #2776bb;
}
.button-bar {
  display: flex;
  flex-wrap: wrap;
  background-color: #244753;
  padding: 7px 7px 0 0;
}
.button-bar > * {
  padding: 1rem .5rem;
  box-sizing: border-box;
  flex: 1 0 calc(33.33% - 7px);
  text-decoration: none;
}
@media (max-width: 768px) {
  .button-bar {
    flex-wrap: wrap;
  }
  .button-bar > * {
    flex: 1 0 100%;
    max-width: calc(100% - 7px);
  }
}

＆＃13;

<div class="w-section w-hidden-medium w-hidden-small w-hidden-tiny popup">
  <div class="w-container popup-container">
    <h1 class="heading white popup-title">Keep Updated</h1>
    <p class="popup-para">Check out our Media Portals</p>
    <div class="button-bar">
      <a href="https://lapismc.net/facebook" class="w-button popup-button facebook">Visit our Facebook Page</a>
      <a href="mailto:contact@lapismc.net" class="w-button popup-button youtube">Send us an Email</a>
      <a href="https://lapismc.net/discord" target="_newtab" class="w-button popup-button forums">Join our Discord Server</a>
    </div>
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;