하나의 셀이 나머지 셀보다 낮은 이유는 무엇입니까?

Question

IE11을 사용하고 있으며 FF 또는 Chrome에는이 문제가 없습니다. 그것은 해상도가 1366x768 인 IE10/11에만 존재합니다. 아래 스크린 샷은이 문제점을 보여줍니다.

여기 jsFiddle에 내 코드입니다 : 첫 번째 셀은 정확한 높이가 지정한

<table class="rvTable" role="presentation" style="line-height:1.25;border-collapse: collapse; min-width: 460px; background-color: transparent;"> 
 
    <colgroup> 
 
    <col style="width: 151px;"> 
 
     <col style="width: 100px;"> 
 
     <col style="width: 56px;"> 
 

 
    </colgroup> 
 
    <tbody> 
 

 
    <tr> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Years to</span><span class="xlPopupStep" data-dojo-attach-point="domNode" widgetId="PS5"> 
 
    <a name="PS5" tabindex="0" title="Definition" class="xlPopupLink" id="PS5" role="link" type="hyperlink" data-dojo-attach-point="_buttonNode, focusNode" text="maturity">maturity</a> 
 
    <span data-dojo-attach-point="_dummyTextHolder"></span> 
 
      <div class="xlPopupStepPopup" data-dojo-attach-point="containerNode"> 
 
      LOADING...</div> 
 

 
      </span> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y1" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="30" widgetId="Y1"><span class="eqAccessibleLabel">30</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>3</span><span>0</span></span> 
 
      </span> 
 
      </span> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"></div> 
 
     </td> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="eqLabel fNormal" id="Y2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="20" widgetId="Y2"><span class="eqAccessibleLabel">20</span><span class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span><span>0</span></span> 
 
      </span> 
 
      </span> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="forcedSpace"> </span><span class="forcedSpace"> </span>Price</span> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal_24" style="font-size: 13px;"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">?</span></span> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"></div> 
 
     </td> 
 
     <td style="border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) currentColor rgb(0, 0, 0) rgb(0, 0, 0); padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal_24" style="font-size: 13px;"> 
 
      <div class="nowrap"><span class="rvTxt fNormal"><span class="wbr">​</span><span class="nowrap">$</span></span><span class="eqLabel fNormal" id="BP2" style="background-color: rgba(0, 0, 0, 0) !important;" aria-label="2 comma 249.46" widgetId="BP2"><span class="eqAccessibleLabel">2 comma 249.46</span> 
 
      <span 
 
      class="eqDocument" role="presentation" aria-hidden="true"><span class="txtNum"><span>2</span></span><span><span>,</span></span><span class="txtNum"><span>2</span><span>4</span><span>9</span><span>.</span><span>4</span><span>6</span></span> 
 
       </span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td style="border-width: 1px 1px 1px medium; border-style: solid solid solid none; border-color: rgb(0, 0, 0) rgb(0, 0, 0) rgb(0, 0, 0) currentColor; padding: 1px; height: 20px; vertical-align: middle; background-color: rgb(255, 255, 255);"> 
 
     <div class="rvParagraph pNormal" style="font-size: 13px;"></div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

이 브라우저 문제이며 라인을 변경하여 해결할 수 - 높이. 현재 선 높이가 1.25이고 문제는 정확히 2로 나눌 수없는 값에 대해서만 발생합니다. (예 : 1.23,1.25,1.27).

Answer 2

, 두 번째는 그래서 자연의를 수신하지 않습니다 - 높이 올리기. 똑같은 크기로 글꼴을 렌더링하는 모든 브라우저를 사용한다면 시간이 많이 걸릴 것입니다. 그래서 둘 다 명시적인 높이를 주거나 첫 번째 셀에서 생략하십시오.

Answer 3

표의 각 셀에 명시적인 높이가 선언되어 있지 않기 때문입니다.

각 셀 사이에 같은 디자인을 사용하고 CSS로 설명하고 싶다면.

<td class="myCell">your content</td> 
<td class="myCell">your second td</td> 

을하고 CSS 부분 (스타일 시트 또는 태그)에 :

당신이 근처에 뭔가를 사용 할 수 있습니다 내 관찰에 따르면

.myCell { 
    height:1em; 
}