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

Question

这个是chrome的，正常

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

怎么解决好呢？syntaxhighlighter 3.083

Answer 1

根本原因是与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都没问题。

Answer 2

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

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

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

chrome中显示效果如下

屏蔽前

屏蔽后

Answer 3

感谢

Answer 4

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

引用来自“joshuazhan”的评论

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

Answer 5

引用来自“joshuazhan”的评论

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

Answer 6

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

Answer 7

有样式冲突了