Vấn đề biên giới IE11

Question

Tôi có thẻ <h1> có đường viền vững chắc, nhưng vì một lý do nào đó, biên giới không hoạt động xung quanh yếu tố. Đôi khi điều đó xảy ra trên IE11 và cũng có thể khi tôi tải lại trang web nó (* border) hoạt động lạ, nhưng đôi khi có vẻ ổn.

Không có sự nhất quán và dường như điều đó xảy ra ngẫu nhiên. Ngoài ra khi điều đó xảy ra, biên giới dừng tại các điểm khác nhau mỗi lần và luôn luôn ở gần cuối.

HTML:

<h1><span style="color:#FFFFFF"><span class="highlight">LOREM</span>&nbsp;IPSUM DOLOR SIT AMET CONTETEUR</span></h1> 

CSS:

.block h1 { 
    border: solid 5px white; 
    display: inline-block; 
    padding: 10px 20px 10px 20px; 
    margin: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 1

Vui lòng thêm lớp này, nó sẽ làm việc trong IE :)

.text-element-14 h1 span{ 
    display:inline-block; 
} 

Thử điều này và sau đó thêm đường viền

Answer 2

Vì tôi không thể tạo lại vấn đề, trong khi trong IE 11, tôi đề nghị thay đổi cách bạn lồng các phần tử. Thay vì

<h1> 
    <span style="color:#FFFFFF"> 
     <span class="highlight">LOREM</span> 
     &nbsp;IPSUM DOLOR SIT AMET CONTETEUR 
    </span> 
</h1> 

tôi muốn đi cho

<h1 style="color:#FFFFFF"> 
    <span class="highlight">LOREM</span> 
    &nbsp;IPSUM DOLOR SIT AMET CONTETEUR 
</h1> 

Hope this helps

Answer 3

này có lẽ xảy ra chỉ khi các công cụ nhà phát triển đang mở và thử nghiệm tại địa phương, và thậm chí sau đó không thường xuyên. Bạn có thể quan sát hành vi này cũng trong IE10, nơi nó cũng xảy ra (chỉ không thường xuyên như trong IE11).

Tôi nghĩ rằng đây là một trong những lỗi kỳ lạ nhất trong lịch sử gần đây của IE, và nó không phải là một thách thức dễ dàng, tôi cũng không thể tìm thấy nó được đề cập trong bất kỳ tài liệu hoặc cách giải quyết vấn đề này. Tôi chỉ nhớ lỗi này từ một thời gian trước, và vì nó không gây ra bất kỳ vấn đề gì trong sản xuất cho những người không có công cụ phát triển được kích hoạt, chúng tôi đã để nó như vậy. Mặc dù từ sự hiểu biết của tôi về vấn đề, tôi nghĩ rằng nó có thể được giải quyết bằng cách tạo một phần tử nội tuyến HTML và nhận kích thước của nó trước khi DOM ready/webfont tải, sau đó bắt đầu một khoảng thời gian để kiểm tra kích thước và kích hoạt phần tử inline HTML đã thay đổi và hoàn nguyên thay đổi DOM trên phần tử đó. Hãy cho tôi biết nếu bạn cần trợ giúp khi tạo kịch bản, chỉ trong trường hợp, nhưng tôi nghĩ bạn sẽ không thể tạo lại vấn đề này trên phiên bản sản xuất vì vậy tôi không chắc liệu bạn có muốn giải quyết vấn đề này hay không.

Answer 4

.text-element-14 h1 span { 
    border: solid 5px white; 
    display: inline-block; 
    padding: 10px 20px 10px 20px; 
    margin: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 5

Nếu sự cố được giải quyết bằng cách xóa phông chữ web và chỉ xảy ra liên tục khi tải lại; điều này có thể được gây ra bởi một sự không thống nhất thời gian khi làm mới? Ví dụ, đôi khi phông chữ được tải trước khi phần tử được tính toán (kết quả tốt) và đôi khi sau (kết quả là đường viền được hiển thị dựa trên ranh giới của những gì IE11 xác định là phông chữ dự phòng).

Answer 6

Tôi đã nghiên cứu một chút và tin rằng đó là lỗi trong IE. Nếu bạn thay đổi h1 thành một thẻ p, sau đó làm cho phông chữ kích thước bạn mong muốn nó sẽ hiển thị chính xác.

Đây là trang web tôi tìm thấy thông tin tại. https://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

Bạn cũng có thể thử thẻ meta này.

<meta http-equiv="X-UA-Compatible" content="IE=10" /> 

Tôi không thể sao chép các lỗi nhưng điều này đã được trao một bounty đây https://superuser.com/questions/838802/ie11-renders-elements-with-border-radius-incorrectly

Answer 7

Kiểm tra Bootstrap lớp ".clearfix"