Question

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

我开始使用包含故障单ID的<span>和包含第二个<div>剩余字段的视口<span>以及动画left属性（由示例中为#attempt1。这在Chrome和Safari中运行良好，但滚动文本在Firefox中的静态文本之上（我不能使用Internet Explorer，因为它不支持Web套接字;我还没有尝试过Opera）。

我尝试将视口<div>替换为另一个<span>（由#attempt2表示），但文本重叠，因为忽略了overflow:hidden样式。只是为了查看发生了什么，我还将display:inline-block样式添加到替换<span>（由#attempt3表示），其行为与原始<div>相同。

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

First attempt, with scrolling text raised above static text

Second attempt, with scrolling text overlapping static text

任何人（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/

Answer 2

我无法解释（i），但对于（ii），请指明

vertical-align: bottom

第二次跨度。

顺便说一下，你可以使用

<div>

如果你想避免垂直对齐的特性，那么

对于这两个区域，并硬编码票证ID的宽度。

Answer 3

我现在可以回答这个问题，因为我已经足够了解这个情况。 firefox中有一个问题（也许你可以称之为bug），"overflow:hidden;"属性。你知道，如果你从CSS中移除"overflow:hidden"类的"viewport"属性，你会得到与chrome相同的样式。

问题列在here

中

Answer 4

See Working DEMO 对于第一个选项，我们不能将div作为显示内联块。因为它只与div元素内联。

HTML

<html>
  <body>
    <div id='attempt1'>
      <span class='static'>
        This text is static
      </span>
      <div class='viewport'>
        <span class='animated'>
          This text is raised in Firefox
        </span>
      </div>
    </div>
    <div id='attempt2'>
      <span class='static'>
        This text is static
      </span>
      <span class='viewport'>
        <span class='animated'>
          This text is overlapped in Firefox and Chrome
        </span>
      </span>
    </div>
    <div id='attempt3'>
      <span class='static'>
        This text is static
      </span>
      <span class='viewport'>
        <span class='animated'>
          This text is raised in Firefox
        </span>
      </span>
    </div>
  </body>
</html>

CSS

.static
{
  background-color:#ffc0c0;
}

.viewport
{
  background-color:#c0ffc0;
  overflow:hidden;
}

.animated
{
  position:relative;

}

div元素中的文本在Firefox中水平对齐的span元素上方

4 个答案: