DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Bootstrap 3的box-sizing樣式導致UEditor控件的圖片無法正常縮放的解決方案
Bootstrap 3的box-sizing樣式導致UEditor控件的圖片無法正常縮放的解決方案
編輯:關於JavaScript     

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。

以上所述是小編給大家介紹的Bootstrap 3的box-sizing樣式導致UEditor控件的圖片無法正常縮放的解決方案的全部敘述,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved