Css divs中的文本赢得'；不要排队

我正在制作一个有不同颜色的单词和字体标题的网站。为此，我将每个单词放在不同的div id中，以更改文本颜色。我不确定是否有比这更好的方法

无论如何，标题的前半部分（彩色部分）低于标题的其余部分。它在Firefox和Chrome上以这种方式显示，但在InternetExplorer上看起来很好。我不知道为什么会有不同，我尝试过不同的字体，这有时会减少问题，但从来没有完全消除它。当然，当我添加填充物使其对齐时，它会在Internet Explorer上把它弄糟

---

以下是该页面的链接：

解决方案是，使用

span

<span id="dotPerfect">
    <span id="color1">Dinner </span>
    <span id="color2">On The </span>
    <span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>

晚餐
上
斑点
个人用餐服务非常适合。。。

试试这个：

#topText > h1 > div {
    display: inline;
}

---

在样式表中添加此代码

对于此类操作，请使用

span

而不是

div

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

现场用餐

我将每个单词放在不同的div id中以更改文本颜色。 我不确定是否有比这更好的方法

最好使用

-标记

DIV标记也有一个来自用户代理样式的默认属性“display:block”，这就是您必须设置“float:left”的原因（在本例中这非常难看）。

试试这个

<div id="dotPerfect">
  <div id="color1">Dinner </div>
  <div id="color2">On The </div>
  <div id="color3">Spot </div>
  <div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>

晚餐
上
斑点
个人用餐服务非常适合。。。

---

将id为dotPersonal的div移动到id为dotPerfect的div

我看不到瓷砖的前半部分比所有浏览器上的其余部分都低。你是说现场晚餐吗？个人用餐服务非常适合。。。线路？