首頁 >web前端 >html教學 >Bootstrap 3的box-sizing樣式導致UEditor控制項的圖片無法正常縮放

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

WBOY
WBOY原創
2016-09-12 17:27:121313瀏覽

  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:

<span style="color: #800000;">*,
*:before,
*:after </span>{<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
     -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
          box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}

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

<span style="color: #800000;">  .edui-container *</span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;
  }<span style="color: #800000;">

  .edui-container *:before,
  .edui-container *:after </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;
  }

  * .edui-container為引用UEditor元件的父元素上所使用的css class。

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn