절대 위치 버그 11

Question

비교하고 (올바르지 매우 명확히) 초메 (올바른) 및 IE11이 JSfiddle 대조 IE의 테이블 셀 :

http://jsfiddle.net/Lr90ko3q/

IE는 높이를 볼 것 div의 실제 높이가 아닌 내부 div의 CONTENT. 즉, 콘텐츠를 몇 줄 추가하면 왼쪽/오른쪽 화살표가 조금 아래로 이동합니다.

알려진 버그입니까? 그렇다면 해결 방법이 있습니까?

감사

(JSfiddle 코드의 복사)

html { 
    box-sizing:border-box 
} 
*, *::before, *::after { 
    box-sizing:inherit 
} 
html, body { 
    position:relative; 
    width:100%; 
    height:100% 
} 
section { 
    width:60%; 
    height:60%; 
    position:relative; 
    background:rgba(0, 0, 0, 0.1) 
} 
section>.content { 
    display:table; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    padding:50px 
} 
section>.content>div { 
    display:table-cell; 
    vertical-align:middle; 
    position:relative; 
    background:rgba(255, 0, 0, 0.2); 
    text-align:center 
} 
#left { 
    position:absolute; 
    left:5%; 
    top:50%; 
    margin:0; 
    transform:translateY(-50%) 
} 
#right { 
    position:absolute; 
    right:5%; 
    top:50%; 
    margin:0; 
    transform:translateY(-50%) 
} 

Answer 1

는 I는 테이블 셀 소자에 고정 된 높이를 강제 JS를 추가함으로써이 문제를 해결.

기능이 매우 간단하고 각 브라우저에서 지원되므로 기본 JS를 사용합니다.

분명히 .table/.table-cell를 타겟팅하는 테이블/표 셀 항목을 호출 한 것으로 바꾸십시오.

"use strict"; 

var ua = navigator.userAgent.toLowerCase(); 
var ie_version = (ua.indexOf('msie') != -1) ? parseInt(ua.split('msie')[1]) : false; 
if (!ie_version && ua.indexOf("trident") !== -1 && ua.indexOf("rv:11") !== -1) 
{ 
    ie_version = 11; 
} 

if (ie_version == 9 || ie_version == 10 || ie_version == 11) 
{ 
    (function(){ 
     window.onresize = calculateTableCellHeights; 
     calculateTableCellHeights(); 

     function calculateTableCellHeights() { 
      // Fixes IE9/10/11 bug where table-cell doesn't inherit table height 
      var tables = document.querySelectorAll(".table"); 
      for (var t = 0; t < tables.length; ++t) 
      { 
       var table = tables[t]; 
       var table_cells = table.querySelectorAll(".table-cell"); 
       for (var c = 0; c < table_cells.length; ++c) 
       { 
        var table_cell = table_cells[c]; 
        var display = window.getComputedStyle(table_cell, null).getPropertyValue("display"); 
        if (display == "table-cell") 
        { 
         // Set fixed height 
         table_cell.style.height = table.offsetHeight+"px"; 
        } 
        else 
        { 
         // If item is no longer a table-cell due to responsive stacking 
         // remove the height. 
         table_cell.style.height = ""; 
        } 
       } 
      } 
     } 
    })(); 
}