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/

This renders in ie7, ie8, firefox, chrome:

123
456

But it becomes in ie9:

123

456

Is there a way to fix this bug?

Answer 1

Have you tried applying css property div{height:auto;margin:0px;padding:0px;} . If that doesn't solve the issue, Try applying border to the div element in-between and check whether it actually has some default height assigned to the <div> element

Hope this helps!