css - 是否有一个防弹概念可以使 h1 和 p 在同一条(基线)线上准确无误？

Question

请参阅此页面> www.tvdiever.nl

HTML:

<div id="slogan">
<h1 id="site-name"><span></span><txp:site_name /></h1>
<p id="site-slogan"><span></span><txp:site_slogan /></p>
</div>

CSS:

/* @fontface! */
/* all fine in all browsers mac or windows */
/* h1 and p have more or less the same baseline by giving h1 a line-height of 120% ... */

#slogan {
    height: 3.7em;
    width: 960px;
    background-color: #220082;
    float: left;
    padding-top: .3em; /* to get h1 and p more or less in the middle of the box! */
}

h1#site-name {
    margin: 0 0 0 20px;
    padding: 0;
    color: #fff;
    font: normal normal 2.8em/120% FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    display: inline !important;
    vertical-align: text-bottom;
    float: left;
}

p#site-slogan {
    color: #fff;
    font: normal normal 1.5em/2.8em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    margin: 0;
    padding: 0;
    display: inline !important;
    vertical-align: text-bottom;
    float: left;
}

/* end @fontface! */

好吧......它的工作，经过大量的调整......通过给 h1 一个 120% 的行高(!？)，p 一个 2.8em 的行高，这是 h1 的字体大小(这是有道理的!)...当然让两个元素内联显示...

问题是:是否有一种可靠的方法可以使 h1 和 p 完全位于同一(基)行上，无论我给它们的字体大小是多少？

Answer 1

仅将两个元素(H1、P)显示为内联元素(display: inline;)- http://jsfiddle.net/Vss8E/