Bootstrap 3的box-sizing樣式導(dǎo)致UEditor控件的圖片無法正常縮放的解決方案
UEditor組件是百度提供的一套開源的web在線所見即所得富文本編輯器，具有輕量，可定制，注重用戶體驗等特點，基于MIT協(xié)議，功能很強大。最近在使用的過程中發(fā)現(xiàn)其中上傳的圖片（或者插入已有的表情包圖片）都無法正常縮放，選中圖片，用鼠標(biāo)點擊并拖動圖片邊沿的小標(biāo)簽，圖片只能縮小不能放大。嘗試過很多方法都沒辦法解決，甚至檢查了js源碼，也沒有發(fā)現(xiàn)有任何異常的地方。
后來無意中發(fā)現(xiàn)頁面上引入了Bootstrap，而Bootstrap默認(rèn)將box-sizing樣式統(tǒng)一設(shè)成border-box了。具體內(nèi)容可以查看Bootstrap的發(fā)布日志：http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
有關(guān)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。
以上所述是小編給大家介紹的Bootstrap 3的box-sizing樣式導(dǎo)致UEditor控件的圖片無法正?？s放的解決方案的全部敘述，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
我們已經(jīng)知道，null 沒有任何的屬性值，并且無法獲取其實體（existence）值。所以 null.property 返回的是錯誤（error）而不是 undefined 。2008-08-08
js中forEach，for in，for of循環(huán)的用法示例小結(jié)
這篇文章主要介紹了js中forEach，for in，for of循環(huán)的用法,結(jié)合實例形式總結(jié)分析了js中forEach，for in，for of循環(huán)相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2020-03-03
JavaScript仿微信（電話）聯(lián)系人列表滑動字母索引實例講解（推薦）
這篇文章主要介紹了仿微信（電話）聯(lián)系人列表滑動字母索引實例,通過for循環(huán)進(jìn)行判斷，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章介紹了JS獲取農(nóng)歷日期具體實例，有需要的朋友可以參考一下2013-11-11
這篇文章主要給大家介紹了如何通過一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過在各種情況下發(fā)生的隱式類型的例子,來詳細(xì)的了解隱式類型轉(zhuǎn)換的過程,需要的朋友可以參考下2022-01-01
詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Javascript中this關(guān)鍵字指向問題的測試與詳解
this是Javascript中一個非常容易理解錯，進(jìn)而用錯的特性。所以下面這篇文章主要給大家介紹了關(guān)于Javascript中this關(guān)鍵字指向問題的相關(guān)資料，文中通過測試的題目考驗大家對this的熟悉程度，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
JavaScript?字符串新增方法?trim()?的使用說明
這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說明，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
本文主要介紹了setTimeout原理；setTimeout(function(){..},0)的意義；setTimeout的this指向和參數(shù)問題。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
AJAX XMLHttpRequest對象創(chuàng)建使用詳解
這篇文章主要介紹了AJAX XMLHttpRequest對象創(chuàng)建使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08