css - Text in divs won't line up

Question

I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…</p>

Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.

Here’s the link for the page: http://www.dinneronthespot.com/index2.html

Answer 1

この種のアクションのspan代わりに使用します。div

<h1>
    <span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>

Answer 2

テキストの色を変更するために、各単語を異なる div id に入れました。これより良い方法があるかどうかはわかりません…</p>

-タグを使用することを<span>お勧めします

DIV タグには、ユーザー エージェント スタイルのデフォルト プロパティ "display:block" もあります。これが、"float:left" を設定する必要がある理由です (この場合、これは非常に見苦しくなります)。