带有 contenteditable 的可扩展文本不使用 IE9 推送答案

【问题标题】：expansible text with contenteditable does not push with IE9带有 contenteditable 的可扩展文本不使用 IE9 推送
【发布时间】：2012-03-18 17:28:15
【问题描述】：

我希望输入文本时跨度自动扩展。这适用于除 IE（v9 测试）之外的所有浏览器，其中文本会覆盖后面的短语（“应该推送文本。”）。

有补救措施吗？看来是刷新问题。布局引擎应该发出刷新。编辑：在兼容模式下

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

它有效，所以它是一个新的 IE9 问题。解决方法？

<!DOCTYPE html>
<html> 
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  </head>
<body>
      <div id="link-widget-container"> 
          <p>this "
                <span id="goal" contenteditable="true" 
                      spellcheck="false" 
                      class="input-widget">
                          test
                 </span>
               " should push this text. 
          </p>
      </div>  
</body> 
</html>

【问题讨论】：

标签： internet-explorer contenteditable html

【解决方案1】：

您是否考虑过将要推送的文本放在自己的范围内：

<!DOCTYPE html>
<html> 
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  </head>
<body>
      <div id="link-widget-container"> 
          <p>this 
                <span id="goal" contenteditable="true" 
                      spellcheck="false" 
                      class="input-widget">
                          "test"
                 </span>
                 <span>should push this text.</span>
          </p>
      </div>  
</body> 
</html>

您可能还想在跨度上使用 float:left CSS 属性，以确保它们很好地融合在一起。

【讨论】：