html - IE9 中 contentEditable iframe 中的空 div

Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<iframe id="rte" style="width: 600px; height:300px"></iframe>

<script type='text/javascript'>

  $(document).ready(function() {
    $('#rte').contents().find('body').prop('contentEditable', true);
    $('#rte').contents().find('body').html('123<div></div>456');
  });

</script>​

http://jsfiddle.net/JsjCJ/

这会在 ie7、ie8、firefox、chrome 中呈现：

123
456

但它变成了ie9：

123

456

有没有办法修复这个错误？

Answer 1

您是否尝试过应用css属性div{height:auto;margin:0px;padding:0px;}。如果这不能解决问题，请尝试将边框应用于中间的 div 元素并检查它是否实际上为<div>元素分配了一些默认高度

希望这可以帮助！