如何获得填充以在Firefox和Chrome中显示相同内容？

Posted 2021-03-30

我有一个带文本框的web page。背景为黑色，文字为白色。它在Chrome和Safari中正确显示，但出于某种原因显示在Firefox中显示。为了争论可以逆转，它在Firefox中是正确的，但不是Chrome或Safari - 我现在只是与大多数人一起。

这是html：

<div class="col-sm-6 black">
  <p style="text-align:center">Each unit is full of character and convenience with original hardwood floors, 10&rsquo; ceilings, washer/dryer and walkability to local restaurants and shops.&nbsp;</p>
  <p style="text-align:center">Rents range from $825 &ndash; $950/month.</p>
  <p style="text-align:center">Call us to reserve your unit:&nbsp;</p>
  <p class="estilo big" style="text-align:center">919-292-2200</p>
  <p class="estilo" style="text-align:center">or through Facebook messenger.<br />
  facebook.com/thelutterloh</p>
</div>

这是CSS：

.black { background-color: #000; padding: 15px 15px 65px 15px; }

这就是它在Chrome和Safari中的外观：

这是Firefox中相同代码呈现的方式：

我已经广泛寻找解决方案，并且没有看到任何可以解决这个问题的方法。此外，Mozilla没有可应用的-moz特定样式。

任何帮助，将不胜感激。

答案

在firefox的情况下，font-size的不一致似乎导致.black div的高度增加（因为font-size看起来更高）。添加的填充增加了div的总高度。我会建议您在进行任何样式之前使用normalize.css或CSS重置以避免此类情况。 另一个解决方法是你设置box-sizing: border-box并在max-height div上设置.black，以及overflow:hidden。

另一答案

你也可以使用@ font-face，这将有助于保持浏览器之间的字体一致，而不是使用默认的浏览器。 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face