특정 상황에서 div의 원치 않는 수직 변위 소스 식별

어플라이언스의 웹 UI에 "시스템 상태"화면을 구성하고 있습니다. 그 중 일부는 전원 공급 전압을 표시하는 게이지 뱅크입니다. 게이지는 '인라인 블록'div 스택으로 구성됩니다. JSON 설명 (임계 값, 읽기, 제목 등)을 기반으로 구성된 클라이언트 측이지만, 정적 HTML로 재현 할 수 있으므로 어떤 방식 으로든 내 문제에 기여한다고 생각하지 않습니다. .needle 요소의 'top'속성을 변경하면 읽기 기능을 실시간으로 업데이트 할 수 있습니다. 게이지는 good과 hi/lo 경고, 치명적, 치명적인 7 가지 세그먼트로 나뉩니다. 대칭이라면 모든 것이 잘 보입니다. 내 게이지가 제로에 기초하도록 일을 재 배열하면 낮은 치명적인 밴드가 올바르게 확장되어 0으로 확장됩니다. 원하지 않는 부작용은 전체 게이지가 낮음 치명적 치와 고 치명적 치 간의 높이 차이만큼 페이지 아래로 오프셋된다는 것입니다.특정 상황에서 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>

나는 방화범이 시각적 요소를 검사하고 계산 된 높이를 확인하여 그 위에 모든 것을 봤는데, 성공없이 등 탑 :

아래의 코드는 문제 자체에 포함 된 데모입니다. 비 계기판 게이지의 어떤 부분은 의도적 인 문서 흐름을 방해하는 것입니다. 이게 뭐야?

출처

2012-02-09 Chris

display: inline-block이 있으므로 vertical-align: top ~ .gauge을 추가해야합니다.

이 읽기, 특히 "기준"에 대해 이야기 부분을 이해하는 이유 vertical-align 사항 : 일반적으로 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

, 당신은 inline-block을 사용할 때마다, 당신은 설정을 고려해야한다 vertical-align (당신은 baseline의 기본에 만족하지 않는).

현재 inline-block과 함께 vertical-align의 일반적인 값의 비교를 볼 수 실제로 그것을 해결하지만 처음부터 고정을 필요가 없습니다 것처럼 느낀다 않습니다 http://www.brunildo.org/test/inline-block.html

출처

2012-02-09 10:59:19 thirtydot

. 두 게이지 div는 모두 동일한 치수이므로 기준선이 잘못 정렬되는 요소를 이해하지 못합니다. – Chris

특정 상황에서 div의 원치 않는 수직 변위 소스 식별

답변

관련 문제