特定の状況でdivの望ましくない垂直方向変位の原因を特定する

アプライアンスのWeb UIに「システム状態」画面を構築しています。その一部は、電源電圧を表示するゲージのバンクです。ゲージは 'インラインブロック' divのスタックから構築されます。 JSONの記述（スレッショルドレベル、読み込み、タイトルなど）に基づいてクライアントサイドで構築されていますが、静的HTMLで再現できるので、私の問題に寄与しているとは思われません。 .needle要素の 'top'プロパティを変更することで、読み上げをライブで更新することができます。ゲージは7つのセグメントに分かれています：goodとhi/lo warn、critical、fatalです。彼らが対称的である限り、すべてがうまく見えます。私のゲージがゼロベースになるように物事を並べ替えると、低致命的なバンドは正確にゼロまで伸びるように拡張されます。望ましくない副作用は、低ゲージと高致死の間の高さの差によってゲージ全体がページをずらすということです。特定の状況でdivの望ましくない垂直方向変位の原因を特定する

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <!-- IMPORTANT - After any changes, check this against the w3c validator: 
     http://validator.w3.org/#validate_by_upload 
     Anything other than a clean pass is not acceptable! 
    //--> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
     <title>WTF?!?</title> 
     <style type="text/css"> 


      .gaugeset { 
       background   : #f8f8f8; 
       font-family   : sans-serif; 
       font-size   : 70%; 

       border    : thin solid #ccc; 
       display    : inline-block; 
       text-align   : center; 
      } 

      .gauge { 
       background   : #f0f0f0; 
       font-family   : sans-serif; 

       border    : thin solid #ccc; 

       margin    : 7px; 
       display    : inline-block; 
       border    : thin solid black; 
      } 

      .gauge > h1 { 
       background   : white; 
       font-size   : 120%; 
       text-align   : center; 

       -webkit-border-radius: 5px 5px 0px 0px; 
       -moz-border-radius : 5px 5px 0px 0px; 
       border-radius  : 5px 5px 0px 0px; 

       margin    : 0px; 
       padding-left  : 7px; 
       padding-right  : 7px; 
      } 

      .readout { 
       display    : inline-block; 
       height    : 180px; 
       width    : 24px; 
       margin    : 7px; 
       margin-left   : 27px; 
       margin-right  : 45px; 
       border    : thin solid #ccc; 
      } 

      .fatal { 
       background    : #ff7f7f; 
       height     : 10%; 
      } 

      .critical { 
       height     : 10%; 
       background    : #ffbf7f; 
      } 

      .warn { 
       height     : 10%; 
       background    : #ffff7f; 
      } 

      .good { 
       height     : 40%; 
       background    : #c0ffc0; 
      } 

      #asymetric .fatal { 
       height     : 18px; 
      } 

      #asymetric .critical { 
       height     : 22px; 
      } 

      #asymetric .warn { 
       height     : 6px; 
      } 

      #asymetric .good { 
       height     : 19px; 
      } 

      #asymetriC#special { 
       height     : 87px; 
      } 

      .needle { 
       position    : relative; 
       left     : 27px; 
       top      : 45px; 
       line-height    : 0;     /* So that the tip of the arrow is where we want it */ 
      } 

      /* The text to the left that marks the transitions between zones */ 
      .marker { 
       position    : relative; 
       right     : 29px; 
       text-align    : right; 
       line-height    : 0; 
       font-size    : 70%; 
      } 

     </style> 
    </head> 
    <body> 
     <div class="gaugeset"> 
      <div class="gauge"> 
       <h1>1.0V</h1> 
       <div class="readout" id="asymetric"> 
        <div class="needle">&#9664&nbsp;-.--V</div> 
        <div class="fatal"></div><div class="marker">1.4v</div> 
        <div class="critical"></div><div class="marker">1.3v</div> 
        <div class="warn"></div><div class="marker">1.2v</div> 
        <div class="good"></div><div class="marker">0.8v</div> 
        <div class="warn"></div><div class="marker">0.7v</div> 
        <div class="critical"></div><div class="marker">0.6v</div> 
        <div class="fatal" id="special"></div> 
       </div> 
      </div> 
      <div class="gauge"> 
       <h1>1.0V</h1> 
       <div class="readout"> 
        <div class="needle">&#9664&nbsp;-.--V</div> 
        <div class="fatal"></div><div class="marker">1.4v</div> 
        <div class="critical"></div><div class="marker">1.3v</div> 
        <div class="warn"></div><div class="marker">1.2v</div> 
        <div class="good"></div><div class="marker">0.8v</div> 
        <div class="warn"></div><div class="marker">0.7v</div> 
        <div class="critical"></div><div class="marker">0.6v</div> 
        <div class="fatal"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

私はFirebugのは、視覚的要素を検査し、計算された高さを確認すると、それ以上のすべてをしてきた、成功せず、その他トップス：

以下のコードは、問題の自己完結型のデモンストレーションです。不規則ゲージの中の何かが「絡み合って」意図した文書の流れを乱しています。それは何ですか？

出典

2012-02-09 Chris

display: inline-blockがあるので、vertical-align: top〜.gaugeを追加する必要があります。

特に理由vertical-align事項を理解するために、「ベースライン」の話セクション、これを読む：あなたがinline-blockを使用するたびにbaselineのデフォルトと満足していない限り、一般的にはhttp://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

は、あなたが（vertical-alignを設定することを検討すべきです）。

あなたがここにinline-blockと組み合わせvertical-alignの一般的な値の比較を見ることができます：確かにそれを修正するが、それは最初の場所で固定する必要はありませんようにそれは感じているんhttp://www.brunildo.org/test/inline-block.html

出典

2012-02-09 10:59:19 thirtydot

。両方のゲージ・ディビジョンは正確に同じ寸法なので、ベースラインが誤整列の原因となっている要素はわかりません。 – Chris

特定の状況でdivの望ましくない垂直方向変位の原因を特定する

答えて

関連する問題