IE9 hiển thị đường màu trắng ở cuối trang

Gần đây tôi đã nhận thấy trong một số trang web và một số trang web của riêng tôi, khi chúng được hiển thị trong Internet Explorer 9, khi nó không ở chế độ Quirks, nó sẽ hiển thị đường trắng, khoảng 1px, ở cuối trang. Nó giống như thẻ html là với padding-bottom: 1px và được bọc trong một phần tử khác với nền trắng (nhưng nó không phải, và nó không có padding). Dường như sự khác biệt giữa các tiêu chuẩn IE9 và chế độ quirks cho thấy khi xác định chiều rộng của phần tử bao bì, nhưng theo chiều dọc. Nó cũng cảm thấy như nội dung của một phần tử được đẩy lên 1px bởi phần tử trước, giống như nội dung của chúng, nhưng, không phải lề hoặc đường viền, đã chồng chéo các tham số phần tử tiếp theo.IE9 hiển thị đường màu trắng ở cuối trang

Tôi không thể xác định chính xác nguyên nhân gây ra lỗi. Đôi khi, một trang chứa 2 bảng và mọi thứ đều ổn. Sau đó, bạn cần phải thêm một thứ ba, và dòng xuất hiện. Thậm chí không cần phải là bảng btw.

Đôi khi, việc đặt lại css sẽ giải quyết được. Đặt cùng chiều cao dòng chúng tôi có trên nội dung để liên kết:

body { 
    line-height: 1 
} 
a, links, visited { 
    line-height: 1 
}

sửa lỗi, nhưng không phải lúc nào. Chỉ có điều tôi có thể làm, là kiểm tra yếu tố theo yếu tố, vô hiệu hóa/cho phép các quy tắc css của họ cho đến khi nó biến mất.

Tôi nhận thấy rằng khi có các yếu tố như bảng, đầu vào, văn bản, vấn đề này có nhiều khả năng xảy ra hơn. 'đặt lại' thuộc tính của họ, đôi khi, giải quyết nó quá.

Tôi biết sẽ dễ dàng hơn để cung cấp mã làm ví dụ, nhưng như tôi đã nói, tôi không thể xác định mẫu cho nó. Tôi có thể cung cấp cho bạn một số ví dụ về trang web/url mà tôi nhận thấy lỗi đó (bạn phải nhìn vào cuối trang và thấy sự khác biệt giữa IE và một trình duyệt khác, như Firefox):

casinosdelmundo.info, gatosabido.com .br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (những người có màu trắng, hoặc gần như trắng bg, thay đổi nền cơ thể với f12 , công cụ của nhà phát triển và bạn sẽ thấy). Tôi tìm thấy một ví dụ ngay cả ở đây tại stackoverflow (như ngày hôm nay, trang stackoverflow.com chính đang hiển thị dòng quá, nhưng điều đó có thể thay đổi từ đó, đôi khi vấn đề xuất hiện hoặc biến mất khi các yếu tố mới xuất hiện hoặc bị loại bỏ):

câu hỏi này có màu trắng-line: Make link in table cell fill the entire row height

này chưa: FireFox 3 line-height

Kiểm tra ảnh chụp màn hình này, nếu bạn vẫn không thấy gì im nói về: enter image description here

sự hiện diện của vấn đề này trên các trang web rất được thiết lập khiến tôi cảm thấy đó là lỗi IE9 và sửa lỗi duy nhất cho nó luôn sử dụng nền trắng, vì vậy sẽ không có ai chú ý đến dòng trắng (dòng vẫn sẽ ở đó) . nhưng đó rõ ràng không phải là lựa chọn tốt nhất. Tôi chưa bao giờ tìm thấy dòng trắng này trong Chrome hoặc Safari.

Vì vậy, có ai phải đối mặt với cùng một vấn đề và có giải pháp tốt hơn không?

Nguồn

2011-10-06 LichKing

Tôi đã thấy nhiều IE9 render câu hỏi về SO thời gian gần đây, tinh chỉnh nhỏ có xu hướng giải quyết chúng (như cách bạn điều sai lầm với line-height). Nó được bảo đảm khá nhiều để trở thành một lỗi IE. Có lẽ bạn nên đăng nhập lỗi này với MS. – invertedSpear

Hmm, tôi vừa nhận được một email từ họ: "Cảm ơn phản hồi của bạn. Chúng tôi có thể tái tạo vấn đề và đang điều tra vấn đề. Trân trọng, Nhóm Internet Explorer". – LichKing

Bây giờ bạn có thể quay trở lại làm việc vặt trong khi chờ MS sửa lỗi, Arthas. – CheckRaise

Tôi không chắc chắn, vì không có HTML ở đây, nhưng nó rất giống với hành vi của trình duyệt chuẩn, khi nó hiển thị nội dung nội dòng. Đó là do thực tế, rằng khi văn bản được hiển thị trình duyệt cần phải để lại một số không gian ở phía dưới cho các chữ cái và ký hiệu như: ",", "y", "p" và như vậy, gây ra trong các chữ cái đó là một một phần nhô ra phía dưới.Bạn có thể hiểu rõ hơn về những gì tôi đang nói về khi bạn nhìn vào hình ảnh này: example of how inline content is displayed

vì vậy nếu bạn có một số đánh dấu như

<body> 
    <div></div> 
    <textarea></textarea> 
</body>

bạn sẽ nhận được rằng không gian thêm ở phía dưới. Để loại bỏ nó, bạn phải sử dụng phần tử khối đó hoặc đặt thành phần tử nội tuyến của bạn theo kiểu css 'display: block'

Nguồn

2011-10-17 17:48:24 user907860

Tôi tìm thấy giải pháp cho vấn đề, nếu một yếu tố ngu ngốc: đặt nút gạt Maximize/Restore của cửa sổ trình duyệt của bạn xuống để Tối đa hóa (= văn bản chú giải công cụ; điều này cho biết cửa sổ ở trạng thái không tối đa). Làm cho cửa sổ trình duyệt thực sự nhỏ hơn so với màn hình vừa vặn. Nhấn F11 ở trạng thái này và không có dòng trắng ở cuối màn hình của bạn (Win7 x32 & x64). (BTW, FF liều không có vấn đề này và là lựa chọn tốt nhất.)

Nguồn

2012-04-20 11:58:05

Điều này xảy ra khi bạn sử dụng kích thước phông chữ phân đoạn.

Ví dụ: lưu lượng truy cập stackoverflow sử dụng h2 {font-size: 140%;} body { font-size:80%;}, dẫn đến tổng kích thước phông chữ 112% cho h2. (! Bao gồm rounding errors, hoan hô) áp dụng được cho kích thước 16px mặc định, và bạn sẽ có được 17.93px

Hãy thử nó cho mình: getComputedStyle(document.querySelector('h2')).fontSize

trình duyệt có một thời gian khó render pixel phân đoạn, và do đó có thể bị lẫn lộn và thêm một điểm ảnh ở phía dưới.

Nhân tiện, Firefox cũng gặp một số sự cố. Khoảng cách giữa các chân trang bị tắt bởi một pixel.

Khắc phục rõ ràng: Sử dụng pixel nguyên để khai báo font-size s.

Nguồn

2012-04-20 12:53:53 user123444555621

Một cách khác là áp dụng: sau nội dung cho cơ thể của bạn chỉ dành cho IE và Edge. Bằng cách này bạn sẽ thoát khỏi dòng trắng thừa. Chúng tôi cũng có thể yêu cầu một số jQuery để nội dung chỉ áp dụng khi bạn ở cuối trang.

body{ 
    position:relative; 
    width:100%; 
} 
body:after{ 
    content: ""; 
    display:block; 
    background-color: #000; 
    height: 1px; 
    bottom: 0px; 
    position: fixed; 
    width: 100%; 
}

jQuery

//add a border to internet explorer 
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") { 
    //console.log(" iam inside"); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
      $("body").addClass("end-border"); 
     } 
     else { 
      $("body").removeClass("end-border"); 
     } 
    }); 
}

Nguồn

2017-05-24 13:53:23

IE9 hiển thị đường màu trắng ở cuối trang

Trả lời

Các vấn đề liên quan