我有一个带文本框的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’ ceilings, washer/dryer and walkability to local restaurants and shops. </p>
<p style="text-align:center">Rents range from $825 – $950/month.</p>
<p style="text-align:center">Call us to reserve your unit: </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