HTML 요소 정렬

Question

나는 다음과 같은 HTML 요소가 있습니다

<fieldset style="margin:20px;border:5px solid red;padding:0;"> 

     <label class="offset widget" >Title goes here</label> 
     <input class="offset widget" style="padding:0" type="text" name="fname"> 
     <div class="offset" style="position:relative;width:120px;display:inline-block;"> 
      <select class="widget" style="position: absolute; left:0;top:0;"> 
       <option value="en_KW">English</option> 
       <option value="ar_KW">Arabic</option>    
      </select> 
     </div> 
</fieldset> 

과 CSS 스타일 : jsfiddle에 또한

  .offset{ 
      margin-left:40px; 
      margin-right:0; 
     } 
     .widget{ 
      width:120px; 
      height:16px; 
      text-align:right; 
      text-height:16px; 
      font-size:11px; 
      font-family:arial; 
      border:2px solid black; 
      float:left; 
      padding:0; 
     } 

: http://jsfiddle.net/tPzqG/5/

1) 왜 사업부 디스플레이를 설정하는 경우 여백을 인라인으로 고려하지 않는다? 레이블과 텍스트 입력 요소도 인라인 요소이며 여백은 고려됩니다 (크롬에서는 파이어 폭스가 아님)

2) 높이가 지정된 경우에도 선택 높이가 레이블 및 텍스트 입력 높이보다 작은 이유 그 중 세명은 똑같습니까?

3) 텍스트 정렬은 레이블에 대해서는 작동하지만 선택 사항에 대해서는 작동하지 않습니다 (크롬에서만). 방향없이 이것을 고칠 수 있습니까? rtl?

4) 왜 사업부 디스플레이가 인라인 블록 FIELDSET 아래 다음 DIV 이동? (단 jsfiddle에서)

Answer 1

1 인 동안의 크롬에 개발자 도구에서 볼 수 있듯이 DIV 높이) 지정되지 않은 경우 div 요소의 크기는 0x0입니다. 블록 요소를 인라인 요소에 넣기 때문입니다. 그리고 그것은 정확하지 않습니다. float를 설정하거나 요소에 절대 위치를 지정하면 자동으로 블록 요소가됩니다.

2) Chrome 개발자 도구에 다시 연결됩니다. 개발자 도구에서 브라우저 엔진이 조금 다른 경우 선택 요소의 높이를 계산한다는 것을 알 수 있습니다. 테두리 높이가 포함됩니다. 정상적인 상황에서

: 실제 높이 = 높이 가기 + 테두리 바닥 높이 위쪽 + 가스켓, 바닥 높이이 경우

: 실제 높이 = 높이 - 상부 경계, 상부 바닥 높이 + 테두리 바닥 높이

3) 스타일 선택이 작동하지 않습니다. 정상적인 상황입니다. 선택한 요소를 브라우저로 전달하면 브라우저가이를 허용하지 않습니다. 물론 예외가 있지만 각 브라우저마다 다르다.

4) 첫 번째 점에서와 같은 것으로 생각된다. 브라우저 레이아웃 프로세스가 거칠고 잘못된 요소의 오프셋을 계산합니다.

float, 위치, 선택 스타일링 및 arictle에 대해 읽어 보시기 바랍니다. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/