CSS显示：flex;在IE浏览器中无法正常工作

首先，为什么要支持IE？这是一个非常古老的浏览器，存在很多问题，尤其是在开发中。我还注意到您使用了jQuery 1.12.4和jQueryUI 1.12.1。同样，它们是旧版本，使您的代码运行缓慢且可能不安全。

至于解决方案，问题在于contentEditable选项。删除后，光标在IE11上显示为正常。

我从没想过要这么说，但是：我在IE11上进行了测试，并且正常

这是新代码：

基于该注释，我添加了一个新函数，该函数检查use是否在p元素上单击，然后将contenteditable设置为true，否则将其设置为false。这在IE上并不理想，但是我认为这是您可以从该浏览器中获得的最大收益。

$(function() {
  function textWrapper(str, sp, btn) {
    if (sp == undefined) {
      sp = [0, 0];
    }
    var txt = "";
    if (btn) {
      txt = "" + str + "";
    } else {
      txt = "" + str + "";
    }

    if (sp[0]) {
      txt = " " + txt;
    }

    if (sp[1]) {
      txt = txt + " ";
    }

    return txt;
  }

  function chunkWords(p) {
    var words = p.split(" ");
    words[0] = textWrapper(words[0], [0, 1]);
    var i;
    for (i = 1; i ", {
      class: "ui-icon ui-icon-close"
    }).appendTo(tObj);
  }

  function makeTextBox(txt) {
    var sp = $("", {
      class: "w b"
    }).html(txt);
    makeBtn(sp);
    return sp;
  }

  function makeDropText(obj) {
    return obj.droppable({
      drop: function(e, ui) {
        var txt = ui.draggable.text();
        var newSpan = textWrapper(txt, [1, 0], 1);
        $(this).after(newSpan);
        makeBtn($(this).next("span.w"));
        makeDropText($(this).next("span.w"));
        $("span.w.ui-state-highlight").removeClass("ui-state-highlight");
      },
      over: function(e, ui) {
        $(this).add($(this).next("span.w")).addClass("ui-state-highlight");
      },
      out: function() {
        $(this).add($(this).next("span.w")).removeClass("ui-state-highlight");
      }
    });
  }

  $("p.given").html(chunkWords($("p.given").text()));

  $("p.given").on("click", ".b > .ui-icon", function() {
    $(this).parent().remove();
  });

  $("p.given").blur(function() {
    var w = unChunkWords($(this));
    console.log(w);
    $(this).html(chunkWords(w));
    makeDropText($("p.given span.w"));
  });

  $("span.given").draggable({
    helper: "clone",
    revert: "invalid"
  });

  makeDropText($("p.given span.w"));
  /**
   * New function. Check document click event and see if use clicked
   * inside or outside the p.given element then set contenteditable
   * accordingly.
   */
  $(document).on("click", function(e) {
    let pElement = jQuery(e.target).closest("p.given");
    let check = !$(event.target).is("p.given") && !$(event.target).parents("p.given").is("p.given");

    if (check) {
      $("p.given").attr("contenteditable", "false");
    } else {
      $("p.given").attr("contenteditable", "true").focus();
    }
  });
});

p.given {
  display: flex;
  flex-wrap: wrap;
}

p.given span.w span.ui-icon {
  cursor: pointer;
}

div.blanks {
  display: inline-block;
  min-width: 50px;
  border-bottom: 2px solid #000000;
  color: #000000;
}

div.blanks.ui-droppable-active {
  min-height: 20px;
}

span.answers>b {
  border-bottom: 2px solid #000000;
}

span.given {
  margin: 5px;
}

  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.




  

    

      

        

          

            the Santee, thDakota
            America
            Qatar
            Philippines