Bootstrap 3的box-sizing样式导致UMeditor控件的图形不能正常缩放

UMeditor组件是百度提供的平等仿开源的web在线所见即所得红火文本编辑器,是UEditor的简化版,UM的紧要特点就是是容量与加载速度直达之转,主文件的代码量为139k,而且吐弃了用传统的iframe格局,接纳了div的加载形式,
以达到更快的加载速度与零加载败北率。目前于使的经过中发现里面上传的图样不可以正常缩放,选中图片,用鼠标点击并拖动图片旁边的多少标签,图片只可以缩短不克放。尝试了无数主意还没有办法缓解,甚至检查了js源码,也从没意识出另非凡的地方。

  后来无形中中发现页面及引入了Bootstrap,而Bootstrap默认将box-sizing体统一而成border-box了。具体内容可以查Bootstrap的揭橥日志:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

  有关box-sizing样式的概念跟用法可以扣押这里:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

  Bootstrap中发生震慑之css:

       

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

我们仅仅待以眼前页面重新定义样式:

.edui-container *{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  .edui-container *:before,
  .edui-container *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

* .edui-container也援UMeditor组件的父元素上的class。

相关文章