IE: trước /: sau 100% vấn đề chiều cao trên td

Question

Có ai có ý tưởng về cách sửa lỗi hiển thị (rõ ràng) của IE bằng: trước /: sau độ cao trên td không?

Từ giao diện của nó, IE dường như chỉ nghĩ rằng: trước /: sau phần tử giả cao bằng nội dung của một phụ huynh trong số đó là <TD>. Nếu <TD> # 1 là x2 dòng có hàm lượng w cao và <TD> # 2 chỉ có x1 dòng nội dung, IE sẽ chỉ hiển thị: trước /: sau độ cao <TD> # 2 để cao bằng giá trị của dòng x1.

Tôi tạo ra một ví dụ fiddle đây để minh hoạ rõ hơn vấn đề của tôi: http://jsfiddle.net/231gnfpz/ lưu ý: Tôi đã thêm một nền đỏ đến: trước /: sau để giúp tốt hơn hình dung vấn đề của tôi trong IE

Trong ví dụ của tôi, tôi có một giữa <TD> mà tôi đã áp dụng một: trước/sau: để cố gắng tạo ra một hộp bóng cho bên ngoài của cột cụ thể. Một dự án cũ của nó vì vậy tôi không có quyền truy cập để viết lại toàn bộ bảng, FireFox/Chrome dường như không có vấn đề với điều này, IE8-11 xuất hiện để có cùng một vấn đề với tôi: trước /: sau khi có chiều cao: 100% .

Code:

table { 
 
    background: grey; 
 
    width: 100%; 
 
} 
 
table td { 
 
    text-align: center; 
 
    vertical-align: top; 
 
    background: white; 
 
    padding: 4px; 
 
    width: 33.33%; 
 
    position: relative; 
 
} 
 
.testTD:before { 
 
    box-shadow: -15px 0 15px -15px grey inset; 
 
    content: " "; 
 
    height: 100%; 
 
    left: -15px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 15px; 
 
    background: Red; 
 
} 
 
.testTD:after { 
 
    z-index: 1; 
 
    box-shadow: 15px 0 15px -15px grey inset; 
 
    content: " "; 
 
    height: 100%; 
 
    right: -15px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 15px; 
 
    background: Red; 
 
}

<table cellspacing="1" cellpadding "0" border="0"> 
 
    <tr> 
 
    <td>test1</td> 
 
    <td class="testTD">test1</td> 
 
    <td>test1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test2 
 
     <br/>test2 
 
    </td> 
 
    <td class="testTD">test2</td> 
 
    <td>test2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test3 
 
     <br/>test3 
 
     <br/>test3 
 
    </td> 
 
    <td class="testTD">test3</td> 
 
    <td>test3</td> 
 
    </tr> 
 
</table>

Answer 1

giải quyết:Vấn đề này đã được giải quyết trong bản xem trước hiện xây dựng của Internet Explorer trên Windows 10. Bạn hiện có thể kiểm tra điều này từ Windows hoặc Mac OS X qua số http://remote.modern.ie. Nếu bạn yêu cầu hỗ trợ IE 11 (và bên dưới), giải pháp xử lý vẫn đủ cho bạn.

Nói chung, các ô bảng có kích thước của chúng được xác định phần lớn bởi nội dung của chúng. Trong trường hợp này, chúng ta có thể thấy rằng phần tử giả kết quả bằng nhau cao bằng nội dung lân cận bên trong vùng chứa được chia sẻ. Đây là những gì Internet Explorer hiểu được nghĩa là 100%.

Phần tử giả của bạn được đặt hoàn toàn và bị ràng buộc bởi ô bảng tương đối được định vị. Đó là lý do mà chúng ta mong đợi phần tử giả sẽ cao bằng phần tử ràng buộc, thay vì chiều cao của nội dung lân cận của nó. Internet Explorer dường như đang phạm sai lầm trong bản án ở đây.

Nếu bạn muốn trình bày cùng trên tất cả các trình duyệt, tôi sẽ đề nghị những thay đổi sau:

1. Tránh sử dụng các yếu tố giả ở đây, và thay vào đó sử dụng các yếu tố thực tế (xem dưới đây)
2. Cycle trên của bạn yếu tố kích thước họ yếu tố phụ huynh của offsetHeight

Vì vậy, đánh dấu của bạn sẽ trông như thế này của họ:

<td class="testTD"> 
    <span class="bar"></span> 
    <!-- content --> 
    <span class="bar"></span> 
</td> 

Sau đó, bạn sẽ phong cách chúng cho phù hợp như bạn đã làm các yếu tố giả gốc:

.testTD .bar:first-child, 
.testTD .bar:last-child { 
    display: block; 
    background: #F00; 
    width: 15px; height: 100%; 
    position: absolute; top: 0; z-index: 1; 
    box-shadow: -15px 0 15px -15px grey inset; 
} 

.testTD .bar:first-child { 
    left: -15px; 
} 

.testTD .bar:last-child { 
    right: -15px; 
} 

Trong Chrome và Firefox bạn đã thiết lập. Bạn không cần phải làm gì thêm nữa. Tuy nhiên, trong Internet Explorer, bạn sẽ cần phải tự thiết lập chiều cao của các yếu tố này.Vì lý do này, chúng tôi sẽ đặt điều kiện kịch bản sau đây về sự hiện diện của một tài sản documentMode trên đối tượng document:

(function() { 

    "use strict"; 

    if (document.documentMode && document.documentMode < 12) { 
     var spans = document.querySelectorAll("span.bar"), 
      count = spans.length; 
     while (count--) { 
      spans[count].style.height = spans[count].parentElement.offsetHeight + "px"; 
     } 
    } 

}()); 

Các end-result phải nhất quán trên tất cả các trình duyệt chính.

Tôi sẽ gửi lỗi trên nội bộ này trên mặt đất xen kẽ. Nếu Chrome và Firefox hoạt động theo một cách và Internet Explorer đang hoạt động khác, nhóm của chúng tôi nên xem xét lý do cho điều này. Tôi sẽ thêm câu hỏi này vào vé tôi mở và đảm bảo cập nhật câu trả lời này nếu cần.

Cập nhật sau cuộc thảo luận trong ý kiến ​​

Nó đã được ghi nhận trong các ý kiến ​​đó đánh dấu ban đầu không thể được thay đổi trong trường hợp đặc biệt này. Scripting đã được xác định chính xác như là một giải pháp có thể ở đây.

(function() { 

    "use strict"; 

    // Get target cells, and create clone-able span element 
    var tds = document.querySelectorAll(".testTD"), 
     span = document.createElement("span"); 
     span.className = "bar"; 

    // Cycle over every matched <td> 
    for (var i = 0; i < tds.length; i++) { 

     // Create references to current <td>, and a(fter)/b(efore) clones 
     var t = tds[i], a = span.cloneNode(), b = span.cloneNode(); 

     // Insert cloned elements before/after <td> content 
     t.appendChild(a); 
     t.insertBefore(b, t.firstChild); 

     // If the user is in Internet Explorer, avoid table-cell height bug 
     if (document.documentMode && document.documentMode < 12) { 
      a.style.height = b.style.height = t.getBoundingClientRect().height + "px"; 
     } 

    } 

}()); 

Nếu bạn đang sử dụng jQuery, điều này có thể được viết ngắn gọn hơn:

(function() { 

    "use strict"; 

    // Create our clone-able element 
    var span = $("<span></span>").addClass("bar"); 

    // Add cloned <span> elements at beginning/end of all .testTD cells 
    $(".testTD").prepend(span.clone()).append(span.clone()); 

    // If the user is in Internet Explorer, avoid table-cell height bug 
    if (document.documentMode && document.documentMode < 12) { 
     $(".testTD .bar").height(function() { 
      return $(this).parent().outerHeight(); 
     }); 
    } 

}());