2

私はWebアプリケーションを作成しています。サポートチケットは、左側に静的テキストとしてチケットIDで表示され、残りのフィールド（説明、重大度、期間、ステータス、レポーター）は、固定テキストでスクロールテキストとして右側に表示されます。サイズビューポート。

<span>まず、チケットIDを含むビューポートと、残りのフィールドを<div>含む1秒を含むビューポート、およびアニメーション化されたプロパティ（例ではで表されます）から始めました。これはChromeとSafariで正常に機能しますが、スクロールテキストはFirefoxの静的テキストよりも上に表示されます（WebソケットをサポートしていないためInternet Explorerを使用できません。Operaはまだ試していません）。<span>left#attempt1

<div>ビューポートを別のビューポート<span>（で表される）に置き換えようとしましたが、スタイルが無視される#attempt2ため、テキストが重なっています。overflow:hidden何が起こったかを確認するdisplay:inline-blockために、置換<span>（で表される#attempt3）にもスタイルを追加しました。これは、元ののように動作し<div>ます。

この動作を示す縮小例を作成しました。ここでは、スクロールするテキスト要素にハードコードされたleftプロパティがあります。このjsfiddlehttp : //jsfiddle.net/uLAm6/を参照してください。

静的テキストの上にスクロールテキストを上げて、最初の試み

静的テキストと重なるスクロールテキストを使用した2回目の試行

誰かが（i）Firefoxが上げられたテキストを表示している理由を説明し、（ii）私の例の試みのいずれかをChromeの場合と同じように機能させる方法を提案できますか？どうもありがとう！

4

4 に答える 4

3

ブラウザごとにレンダリングが異なるため、これをリセットします。あなたの場合、要素のミスアライメントに影響を与える2つまたは3つの要因があります。SPANはinline要素であるため、デフォルトの整列はbaselineこの定義のvertical-align：topです。このように書いてください：

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

詳細については、こちらを確認してくださいhttp://jsfiddle.net/uLAm6/6/

于 2012-08-13T08:59:38.363 に答える
0

（i）については説明できませんが、（ii）については、

vertical-align: bottom

2番目のスパン。

ちなみに、

<div>

両方の領域について、垂直方向の配置の特殊性を回避したい場合は、チケットIDの幅をハードコーディングします。

于 2012-08-13T08:36:36.467 に答える
0

私はこの状況を十分に経験したので、今この質問に答えることができました。属性のあるfirefoxに問題があります（おそらくそれをバグと呼ぶことができます）"overflow:hidden;"。"overflow:hidden"ご覧のとおり、CSSでクラスから属性を削除する"viewport"と、chromeと同じスタイルになります。

問題はここにリストされています

于 2012-08-13T08:39:51.740 に答える
0

動作中のデモを参照してください 。最初のオプションとして、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 に答える