tag showing as a different size on chrome and firefox

Posted 2021-03-30

我的问题在于此代码，您可以在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:[e-mail]" 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的了解有限。谢谢。

答案

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

.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:[e-mail]" 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>

以上是关于tag showing as a different size on chrome and firefox的主要内容，如果未能解决你的问题，请参考以下文章

python with as

AS3 转 Java

Delegate, Method as Parameter.

AS不能真机调试

Python???import???as??????

分组统计