CSS Nút dính div không hoạt động trong IE 11

Tôi cần phải làm cho div chứa các nút dính, sao cho các nút trong div đó sẽ ở dưới cùng khi người dùng cuộn màn hình. Điều này là để người dùng không phải cuộn tất cả các con đường xuống để bấm vào các nút.CSS Nút dính div không hoạt động trong IE 11

trang mẫu: https://jsfiddle.net/thunderbolt36/a4yjfg13/

Các div chứa các nút là tất cả các con đường xuống ở đây:

<div class="form-group sticky-button-thing-not-working-on-ie"> 
    <div class="col-md-offset-2 col-md-10"> 
     <input type="submit" value="Save" class="btn btn-default" /> 
    </div> 
</div>

Lớp CSS để làm cho nó dính (làm việc trên Firefox):

.sticky-button-thing-not-working-on-ie { 
    position: sticky; 
    bottom: 0; 
    right: 0; 
    background: rgba(0, 211, 211, 0.6); 
}

Nhưng tương tự không hoạt động trên Internet Explorer 11.

Bất kỳ trợ giúp về làm thế nào để có được cùng một mã làm việc trên IE11?

Kết quả mong đợi: https://i.imgur.com/bEHXcrG.png

Nguồn

2016-06-05 Tx36

IE11 sẽ không hỗ trợ position:sticky và sẽ không bao giờ (vì nó đang được superceded bởi Edge): see browser support at Can I Use

CSS Tricks gần đây đã đăng một cái gì đó có thể giúp: Sticky Footer, Five Ways

Thậm chí sau đó, ví dụ flex sẽ không hoạt động với IE11, nhưng bạn có thể tinh chỉnh nó bằng mã số từ Normalizing Cross-browser Flexbox Bugs.

Nguồn

2016-06-05 20:08:38 aardrian

sticky không hoạt động trên IE11, nhưng may mắn thay, trong trường hợp này, bạn có thể sử dụng fixed, sẽ hoạt động trên cả trình duyệt cũ và mới.

.sticky-button-thing-not-working-on-ie { 
    position: fixed;       /* added to support older browsers */ 
    position: sticky; 
    bottom: 0; 
    right: 0; 
    background: rgba(0, 211, 211, 0.6); 
}

Và bạn thực sự có thể thả sticky, vì nó không được sử dụng như thế nào đó là dự định. sticky vượt trội tức là khi bạn đặt nó bên dưới cạnh trên cùng và khi di chuyển xuống dưới cạnh trên, nó sẽ di chuyển với trang cho đến khi nó chạm tới cạnh trên cùng, nơi nó sẽ dừng lại và ở lại cho đến khi cuộn lên lần nữa.

Side lưu ý: Cạnh hỗ trợ sticky từ phiên bản 16

Nguồn

2016-06-05 20:20:23 LGSon

tốt, yếu tố cố định được vị trí tốt để Viewport – shabunc

@shabunc Đó là đúng, và 'fixed' là gần nhất bạn có thể nhận được cho các trình duyệt không hỗ trợ 'sticky' ... Vâng, bạn có thể thêm một kịch bản nhỏ để làm cho nó hoạt động như là 'dính' – LGSon

dính! = cố định – kpup

này có thể được giải quyết tốt nhất bởi StickyBits, mà là một polyfill cho position: sticky cho IE (và các trình duyệt khác): https://github.com/dollarshaveclub/stickybits

quan trọng nhất với tôi :

nó không có độ dốc mà các plugin được xây dựng xung quanh vị trí: cố định bởi vì nó cố gắng hỗ trợ vị trí: dính đầu tiên.

Nguồn

2017-10-19 13:22:38 nachtigall

Kiểm tra trang web của bạn trong top <!DOCTYPE HTML>

Nguồn

2017-11-03 09:28:20

CSS Nút dính div không hoạt động trong IE 11

Trả lời

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