html - div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

Question

我正在编写一个 Web 应用程序，其中支持票证显示为左侧的票证 ID 作为静态文本，其余字段(描述、严重性、持续时间、状态、报告者)作为滚动文本显示在右侧在固定大小的视口(viewport)中。

我从 <span> 开始包含票证 ID 和视口(viewport) <div>包含第二个<span>与其余字段，以及动画 left属性(在示例中由 #attempt1 表示)。这在 Chrome 和 Safari 中工作得很好，但在 Firefox 中滚动文本会高于静态文本(我无法使用 Internet Explorer，因为它不支持 Web 套接字；我还没有尝试过 Opera)。

我尝试更换视口(viewport) <div>与另一个<span> (由 #attempt2 表示)但是文本会重叠，因为 overflow:hidden样式被忽略。为了看看发生了什么，我还添加了 display:inline-block款式更换<span> (由 #attempt3 表示)，其行为类似于原始 <div> .

我创建了一个显示此行为的简化示例，其中滚动文本元素具有硬编码 left属性(property);请看这个jsfiddle http://jsfiddle.net/uLAm6/ .

任何人都可以 (i) 解释为什么 Firefox 显示凸起的文本，并 (ii) 提出一种方法，使我的示例中的任何尝试像在 Chrome 中一样工作？非常感谢!

Answer 1

每个浏览器的渲染方式都不同，这就是为什么我们 RESET这。在您的情况下，有 2 或 3 个因素会影响元件未对准。 SPAN 是一个inline 元素，因此定义vertical-align:top 的默认对齐方式是baseline。像这样写:

.static,.viewport
{
    vertical-align:top;
}
body{
    line-height:1;
}

查看更多信息http://jsfiddle.net/uLAm6/6/