css - 为什么这段在不同的浏览器中看起来不一样？

Question

这可能是一个菜鸟问题，但我无法让它在每个浏览器中看起来都一样。我在这里做错了什么？我想在所有浏览器中像在 Firefox 中一样显示文本。

参见:Firefox:

blabla http://piclair.com/data/ho0b9.jpg

Chrome :

Chrome http://piclair.com/data/mx336.jpg

Safari :

Safari http://piclair.com/data/q5ygn.jpg

我的 CSS:

#myslogan {
float: left;
margin-top: 50px;
margin-left: 0px;
width: 290px;
height: 75px;
background: url('../images/subhlogobg.png') no-repeat;
padding: 3px 0 0 11px; 
line-height: 35px;
}

p.subs {
font-weight: bold;
display: inline;
color: #F0821F;
font-size: 23px;
}

.harabara {
list-style: none;
font-family: 'harabararegular';
letter-spacing:1px;
}

我的 HTML:

<div id="myslogan" class="harabara">
    <p class="subs">Logo en huisstijl ontwerp <br /> 
    voor een scherpe prijs!
    </p>
</div>

Answer 1

您定义了具有固定宽度的父容器 #myslogan。

如果您有足够大的字体和足够长的不间断文本行，内容可能会溢出。

不同的浏览器有不同的默认字体(因此字母大小/间距)所以线宽会因平台而异。

此外，不同的浏览器创建粗体字的方式不同，所以关闭粗体看看会怎样发生了。