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

Jaxu發表於2016-09-12
boot控制元件

　　UEditor元件是百度提供的一套開源的web線上所見即所得富文字編輯器，具有輕量，可定製，注重使用者體驗等特點，基於MIT協議，功能很強大。最近在使用的過程中發現其中上傳的圖片（或者插入已有的表情包圖片）都無法正常縮放，選中圖片，用滑鼠點選並拖動圖片邊沿的小標籤，圖片只能縮小不能放大。嘗試過很多方法都沒辦法解決，甚至檢查了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;
}

　　我們只需要在頁面上重新定義css來覆蓋Bootstrap中的上述樣式即可，如：

  .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為引用UEditor元件的父元素上使用的css class。

 

相關文章