IE gạch bỏ CSS phần tử giả?

Tôi đã cố gắng để một vài phần tử giả hoạt động trên IE, nhưng nó không cho phép tôi.

Nó gạch bỏ CSS và hoạt động như thể nó không có ở đó, điều này khiến tôi khó chịu.

Có ai biết tôi đang làm gì sai không?

.newbutton {
  border-radius: 50%;
  width: 74px;
  height: 74px;
  position: relative;
  background-color: black;
  margin: 60px 0px 25px 17px;
  overflow: visible;
}

.newbutton:before {
  content: "f";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 37px;
  left: 37px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: fadecolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: fadecolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.newbutton:after {
  content: "";
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  top: -3px;
  left: -3px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

Ảnh chụp màn hình những gì xảy ra:

Đây là một vấn đề đã biết, nhưng trên thực tế, các phong cách đang được áp dụng. Các công cụ dành cho nhà phát triển cho rằng các kiểu phần tử giả đang bị ghi đè bởi các kiểu tương ứng của phần tử gốc. Điều này dễ dàng được chứng minh bằng cách kiểm tra Kiểu tính toán của phần tử gốc và xem xét (những gì các công cụ F12 tin là) các kiểu cạnh tranh:

Tuy nhiên, một lần nữa, những phong cách này trên thực tế đang được áp dụng cho các yếu tố chính xác - bất kể những gì các công cụ dành cho nhà phát triển tin tưởng hoặc đề xuất. Bạn có thể xác nhận điều này bằng cách chạy qua phần tử gốc và hai phần tử giả và ghi lại chiều cao đã tính của chúng:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

Tôi sẽ kiểm tra xem liệu chúng tôi đã có vấn đề nội bộ theo dõi lỗi này chưa và thêm câu hỏi này vào đó. Nói chung, chúng tôi cố gắng cung cấp cho các vấn đề như thế này lượng sự chú ý tương ứng với mức độ đau buồn mà vấn đề đang gây ra trong thế giới thực. Vì vậy, việc có câu hỏi của bạn dưới dạng một bổ sung mới trên vé có thể giúp chúng tôi tiến hành sửa chữa :)

Tôi đã có cùng một vấn đề này! Bạn phải cung cấp cho các phần tử giả :beforevà của bạn :aftermột thuộc displaytính.

Thêm phần sau vào :beforevà :after.

display: block; 

Điều này sẽ khắc phục sự cố của bạn. :)

Để thêm vào câu trả lời ở trên. Tôi đã thử display: block nhưng vấn đề của tôi là hình nền bị cong vênh. Thay vào đó, tôi đã sử dụng bên dưới:

display: inline-block;

Điều này đã khắc phục sự cố của tôi với hình ảnh bị cong vênh trong: before: after

Vì tôi gặp vấn đề tương tự với Material Font và IE11 và không thể giải quyết nó bằng các giải pháp trên, tôi đã xem xét thêm:

Tài liệu về các biểu tượng material design đề cập đến việc sử dụng

<i class="material-icons">&#xE87C;</i>

cho các trình duyệt không hỗ trợ chữ ghép. Điểm mã cho từng mục được liệt kê tại đây: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Vấn đề với: sau các phần tử là HTML trong thẻ content-Tag được hiển thị dưới dạng văn bản thuần túy hiển thị & # x .. vì vậy bạn phải sử dụng \ Escape như sau:

content:  "\e5c5";

Tôi đã có cùng một vấn đề này! Bạn phải cung cấp cho cha mẹ của phần tử giả một thuộc overflow : visibletính.

Hãy xem liên kết này " http://stackoverflow.com/questions/2587669/can-i-use-the- After-pseudo-element-on-an-input-field ", như được trích dẫn từ liên kết này

: after và: before không được hỗ trợ trong Internet Explorer 7 trở xuống, trên bất kỳ phần tử nào.

Nó cũng không có nghĩa là được sử dụng trên các phần tử được thay thế như phần tử hình thức (đầu vào) và phần tử hình ảnh.

Nói cách khác, điều đó là không thể với CSS thuần túy.

/ * * Mẹo ở đây: * bộ chọn này nói "lấy phần tử dom đầu tiên sau * văn bản đầu vào (+) và đặt nội dung trước của nó thành giá trị * (: trước). * /

input#myTextField + *:before {
       content: "👍";
    }