Bootstrap 3的box-sizing样式导致UMeditor控件的图片无法正常缩放
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控件的图片无法正常缩放的更多相关文章
- Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放
UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...
- Flutter样式和布局控件简析(二)
开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...
- WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单M ...
- WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...
- WPF-实现Windows 7 样式 Aero TreeView 控件
关于实现Windows 7 样式 Aero TreeView 控件的具体过程可以参考如下文章 http://www.cnblogs.com/o2ds/archive/2010/06/22/176302 ...
- 【转】WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式 ...
- duilib 修复padding属性导致其他控件自动计算宽高度错误的bug和导致自己宽高度错误的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42950733 BUG 一:padding导致其他控件宽 ...
- C语言Windows程序开发—Windows窗口样式与常用控件样式【第04天】
(一)Windows窗口(MDICLIENT)样式介绍 /* Windows窗口样式 */ WS_BORDER //带有边框的窗口 WS_CAPTION //带有标题栏的窗口 WS_CHILD //子 ...
- Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉
Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉 解决方案 在本页面添加下面的样式 <style type="text/css&qu ...
随机推荐
- Echarts 柱状图属性详解
<script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init ...
- php 二维数组按照某个键排序
$date = array_column($arr, 'run_date'); //上面得到的结果:array(0=>'2017-11-21',1=>'2017-11-20',3=> ...
- NodeJs学习相关网址
node官方中文 https://nodejs.org/zh-cn/ Node.js 中文网 https://nodejs.org/zh-cn/ Node.js 教程 | 菜鸟教程 http: ...
- I/O系统(一)
输入输出系统的发展大致可以分为4个阶段1.早期阶段 特点: 1.1每个IO设备都得有一套独立的逻辑电路和CPU相连. 1.2输入输出过程需要通过CPU,穿插在程序运行的过程中,处理IO时候 ...
- 46 【golang项目】完成了一个小小的播放器功能
项目地址:https://github.com/helww/mylab/tree/master/go/player 这个项目中用到了readme说明文件是一个markdown文件. 基础的控制语法,网 ...
- JAVA中float与double的区别
float是单精度类型,精度是8位有效数字,取值范围是10的-38次方到10的38次方,float占用4个字节的存储空间 double是双精度类型,精度是17位有效数字,取值范围是10的-308次方到 ...
- GPL_LGPL
LGPL 与GPL的区别 GPL(GNU General Public License) 我们很熟悉的Linux就是采用了GPL.GPL协议和BSD, Apache Licence等鼓励代码重用的 ...
- scrapy -->CrawlSpider 介绍
scrapy -->CrawlSpider 介绍 1.首先,通过crawl 模板新建爬虫: scrapy genspider -t crawl lagou www.lagou.com 创建出来的 ...
- 查询Oracle 临时表空间使用情况[z]
[z]http://blog.itpub.net/28697282/viewspace-1441321/ SELECT d.tablespace_name “Name”, TO_CHAR(NVL(a. ...
- eclipse中将一个项目作为library导入另一个项目中
1. github上搜索viewpagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator2. 下载zip包,解压,eclips ...