<a> 标签在 chrome 和 firefox 上显示为不同的大小答案

【问题标题】：<a> tag showing as a different size on chrome and firefox<a> 标签在 chrome 和 firefox 上显示为不同的大小
【发布时间】：2018-05-31 00:10:18
【问题描述】：

我的问题是这里的代码，您可以在 lapismc.net 上查看。无论出于何种原因，它在 chrome 中的显示方式与在 Firefox 中的显示方式不同。

“w-”类来自 CandyUI.css。弹出按钮类如下。

.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>

chrome中的按钮显示是这样的

在 Firefox 和 Edge 中也是这样

感谢任何和所有帮助，请记住，我主要是一名 Java 开发人员，对 CSS 的了解有限。谢谢。

【问题讨论】：

你能做的最好的事情是在问题中创建一个minimal reproducible example，确保问题被重现。通过这种方式，我们可以检查并准确告诉您您需要什么代码。请注意您发布的代码does not reproduce 问题。
我没有看到浏览器中的具体差异。不过，我确实看到了其他各种差异。
我建议你检查 HTML，有时语法不好会破坏事情，它可能与 CSS 无关。当然，你需要考虑所有的 CSS，而不仅仅是它的一部分
使用 candyUI.css 更新您的问题。需要帮助。

标签： html css google-chrome firefox

【解决方案1】：

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

.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);
  }
}

<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>

【讨论】：