2

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

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

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

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

第一次尝试，滚动文本高于静态文本

第二次尝试，滚动文本与静态文本重叠

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

4

4 回答 4

3

每个浏览器的呈现方式都不同，这就是我们重置它的原因。在您的情况下，有 2 或 3 个因素会影响元素错位。SPAN是一个inline元素，因此默认对齐是baseline为此定义的垂直对齐：顶部。像这样写：

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

检查更多http://jsfiddle.net/uLAm6/6/

于 2012-08-13T08:59:38.363 回答
0

请参阅 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;

}
于 2012-08-13T09:02:07.863 回答
0

我无法解释 (i)，但对于 (ii)，请指定

vertical-align: bottom

对于第二个跨度。

顺便说一句，您可以使用

<div>

如果您想避免垂直对齐的特殊性，请对这两个区域进行硬编码，并对工单 ID 的宽度进行硬编码。

于 2012-08-13T08:36:36.467 回答
0

我现在可以回答这个问题，因为我已经经历了足够多的这种情况。"overflow:hidden;"Firefox 中存在属性问题（也许您可以称其为错误） 。你看，如果你在 CSS 中"overflow:hidden"从你的类中删除属性"viewport"，你会得到与 chrome 中相同的样式。

问题在此处列出

于 2012-08-13T08:39:51.740 回答