IE 11에서 CSS 테두리가 모달로 사용됩니다.

Question

IE 11에서만 발생합니다. 모달로 된 표가 있습니다.

테두리 높이를 변경해도 아무 것도 변경되지 않습니다. 액세스뿐만 아니라 여기

<div class="modalDiv" id="modalDiv" style="left: 587px; top: 213px; width: 450px; height: 530px; display: block; opacity: 1;"> 
<table class="modalTable" cellspacing="0" cellpadding="0"> 
    <tbody><tr> 
     <td> 
      <table width="100%" cellspacing="0" cellpadding="0"> 
       <tbody><tr> 
        <td class="modalWindowHeader" onmousedown="dragStart(event)">&nbsp;</td> 
        <td class="modalWindowHeaderClose" onclick="closeModalWindow()"></td> 
       </tr> 
      </tbody></table> 
     </td> 
    </tr> 
    <tr> 
     <td class="modalWindowContent"> 
      <iframe class="modalInnerIframe" id="modalIFrame" src="url" frameborder="0" scrolling="yes" style="height: 100%; visibility: visible;"></iframe> 
     </td> 
    </tr> 
    <tr> 
     <td class="modalWindowBottomBar"> 
      <table width="100%" height="10" cellspacing="0" cellpadding="0"> 
       <tbody><tr> 
        <td><img src="gif"></td> 
        <td width="5" class="modaldWindowBottomBarSlider" onmousedown="resizeStart(event)">&nbsp;</td> 
       </tr>    
      </tbody></table> 
     </td> 
    </tr> 
</tbody></table> 
</div> 

은,이 답변은 코멘트에 제시된 추가 정보를 기반으로

td.modalWindowBottomBar { 
    background-image: url("gif"); 
    background-color:silver;  
    height:10px; 
    text-align:right; 
} 

Answer 1

테두리의 CSS입니다 : 여기

는 HTML의 문제의 사이트로 이러한 세부 정보 및 사이트 액세스는 향후 제공되지 않을 수 있습니다.

Internet Explorer에서 레이아웃 버그가 발생했습니다. <tbody> 요소의 높이를 99%으로 설정하면 Internet Explorer는 다른 요소에 적용된 명시적인 높이를 무시하므로 셀이 확대되어 반복되는 배경이 표시됩니다.

나는 아래에 마크 업 및 스타일을 삶은 한 다음

<table> 
    <tbody> 
     <tr><td>a</td></tr> 
     <tr><td>b</td></tr> 
     <tr><td>c</td></tr> 
    </tbody> 
</table> 

table, td { 
    background: #7777FF; 
    border: 1px solid black; 
} 

table { height: 200px; } 
tbody { height: 99%; } 
td { padding: 10px; } 

tr:first-child td, 
tr:last-child td { 
    height: 10px; 
} 

당신이 (visit fiddle)는 크롬과 Internet Explorer에서, 당신은 유사한 테이블 위의 볼 볼 때 수행원. 왼쪽 예 (녹색)는 Chrome이고 올바른 예 (파란색)는 Internet Explorer입니다. 두되는 브라우저에 <tbody>

는 99%의 높이를 갖는다. 파란색 테이블을 가리키면 height이 auto으로 재설정되어 레이아웃을 복구합니다. 이것은 문제의 해결책이기도합니다. 단순히 높이를 99%으로 설정하라는 지시를 제거하면 문제가 해결 될 것입니다. 또는 대신 set your heights on the table-rows 수 있습니다.

내 마지막에는 Internet Explorer의 향후 버전에서 해결 방법에 관해 팀과 이야기하고 interop 버그를 제기 할 것입니다. 이상적으로 이와 같은 문제에 부딪치지 않아야하므로 이와 같은 상황에서 다른 브라우저처럼 작동하도록 최선을 다할 것입니다.