tinyMCE编辑器与输出看起来不一样

Question

我正在使用tinyMCE编辑器，我在CSS中使用了两个与float:right;相同的div。

我遇到的问题是，当我保存HTML并在任何浏览器上打开保存的内容时，它与编辑器中的内容看起来不一样。

作为一个例子，我附上了2张图片，注意蓝色框的高度（在编辑器和输出中）有所不同。

编辑：

输出：

以下是编辑器中的HTML：

<div class="sub-mw" div="">
1 <br />1<br />1<br />1<br />

<!--@*@TStem1@*@-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--@*@TEtem1@*@--> 

<br /><br /><br />

<!--@*@TStem1@*@-->
<div id="enews">
<div class="enewstext">News</div>
</div>
<!--@*@TEtem1@*@-->

1<br />1<br />1<br />1<br />1<br /><br />as<br />dasd
<br />asd<br />a<br />da
</div>

此处使用的是css：

.enewstext {
    color: #FFF;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #0163b1;
    width: 100%;
    box-shadow: 0px 5px 0px #FFF;
    text-indent: 20px;
}

#enews{
    background:#3394e1;
    width:18%;
    height:300px;
    float:right;
}

编辑1： 在此方案中，跟踪问题，它是由<br>标记引起的。它在tinymce编辑器中的高度比在chrome上的高。

关于如何解决这个问题的任何想法？