SyntaxHighlighter 3.083,代码高亮在chrome和firefox下各自表现出第一行开始的位置不一致(问题如图),firefox会空一行而chrome没有,求怎么解决呢?

Glogo 发布于 2013/07/29 21:34
阅读 2K+
收藏 1

这个是chrome的,正常

下面这个是firefox,空了一行,(PS:我把右上角那个帮助链接去取消掉了)

怎么解决好呢?syntaxhighlighter 3.083

加载中
0
24hour
24hour
有样式冲突了
0
joshuazhan
joshuazhan
有具体的页面能看一下就知道了,只是图还不行,我倒是遇到过syntaxhighlighter和bootstrap冲突的情况,他们都有一个class叫container
0
请喊我大龙哥
请喊我大龙哥

引用来自“joshuazhan”的评论

有具体的页面能看一下就知道了,只是图还不行,我倒是遇到过syntaxhighlighter和bootstrap冲突的情况,他们都有一个class叫container

我也是用bootstrapt和syn高亮样式冲突,我的解决方式,供参考

.syntaxhighlighter .container
 {
    min-width: 510px;
    width: 560px;
 }





0
请喊我大龙哥
请喊我大龙哥

引用来自“俺夲善良”的评论

引用来自“joshuazhan”的评论

有具体的页面能看一下就知道了,只是图还不行,我倒是遇到过syntaxhighlighter和bootstrap冲突的情况,他们都有一个class叫container

我也是用bootstrapt和syn高亮样式冲突,我的解决方式,供参考

.syntaxhighlighter .container
 {
    min-width: 510px;
    width: 560px;
 }





对于FF下的行号错位,可以重写bootstrap或者是syntaxhighlighter的container样式,在syn中“”会被当作一行,所以错位
0
狂奔的菜鸟
狂奔的菜鸟
昨天也遇到了这个问题,我把syntaxhighlighter样式shCoreXXX.css中的vertical-align:baseline给注释掉就好了
Glogo
Glogo
感谢
0
龙宜坡

屏蔽syntaxhighlighter/styles/shCore.css 84行如下代码就好了,应该是和bootstrap冲突了。

.syntaxhighlighter table td.code .container {
  position: relative !important;
}

留给后来的朋友参考,研究了半天

chrome中显示效果如下

屏蔽前

屏蔽后

0
Z
Zollty

根本原因是与bootstrap的.container样式冲突,如下位置是bootstrap的定义:

.clearfix::before, ...,.container::before, .container::after, ..., .modal-footer::before, .modal-footer::after {
    content: " ";
    display: table;
}

就是这个display: table;属性导致的,重写一个 syntaxhighlighter的container样式覆盖它就行了:

.syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {display: none;}



这是根本的解决方法,实测firefox和chrome都没问题。





返回顶部
顶部