Rails中Kindeditor样式与项目css冲突的解决

在rails中使用Kindeditor之后一切都很美好,上传啥的都帮你搞定了,唯一美中不足的是上传之类的弹出窗口中的内容有点错乱:

而新建一个rails项目时未发现此情况,为了确认将项目中的custom.scss删除,结果Kindeditor样式变得正常了,但这完全不能接受,因为web整个变得乱七八糟了.

这是典型的css规则冲突,下面我们先来找到冲突的这条规则.

打开Safari开发,选择网页检查器,在元素中定位到格式不正确的html元素

在右侧样式里可以看到所有应用在该元素上的样式,包括继承的,指定的等等.下面就简单了,我们依次禁用非Kindeditor自带的css样式(因为这个不可能会错),尤其是application.css中的样式.果然几次定位后很快就找到冲突的位置,找到关键字cf-input,打开rails项目的custom.css.scss文件,找到该条规则:

input:not(.cf-input), textarea, select, .uneditable-input { border: 1px solid #bbb; width: 100%; padding: 10px; margin-bottom: 15px; @include box_sizing; }

显然发生冲突的只可能是第一个判断:input:not(.cf-input),因为后面的和Kindeditor元素没神马关系.这种not的选择器往往原项目里很完美,一旦加入新的css样式就会出现这种蛋疼的效果.

不过没事,css的选择器还是很强大的,我们可以发现Kindeditor的所有样式类都以ke-开头,所以再写一个not选择器就可以了:

input:not(.cf-input):not[class^='ke-'], textarea, select, .uneditable-input{

}

新加的css选择器表达式意思是选择类名不是以ke-开头的所有input元素,注意这条不能写成平行形式及用逗号单独分开:

//以下一句是错的!!! input:not(.cf-input), textarea, select, .uneditable-input,*:not[class^='ke-']{

}

因为逗号分隔都是OR的关系,你这样的意思是如果该元素是非ke-开头的都会应用规则,这回破坏原有的css样式.

但遗憾的是这条:not[class^=’ke-‘]规则不管用 ;( ,不管是在firefox或是Safari上.原因不明(我写错了么? -_-b)所以我们只有手动完整的写出来:

input:not(.cf-input):not(.ke-input-text):not(.ke-button-common .ke-button):not(.ke-inline-block), textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

这在safari上很完美,但在firefox和IE上web主界面却变乱了.所以我们还是全部分开写吧:

//最终css样式 input:not(.cf-input):not(.ke-input-text):not(.ke-button-common):not(.ke-button):not(.ke-inline-block), textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

再次打开web页面,格式都未变,打开Kindeditor弹出框,一切正常了:

好了问题解决了,可以继续玩耍了,强迫症伤不起啊 ;)