1. 程式人生 > >Bootstrap 3的box-sizing樣式導致UMeditor控件的圖片無法正常縮放

Bootstrap 3的box-sizing樣式導致UMeditor控件的圖片無法正常縮放

asp 文件的 加載失敗 容量 color 異常 iframe 方式 選中圖片

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。

Bootstrap 3的box-sizing樣式導致UMeditor控件的圖片無法正常縮放