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

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

眼泪淡了忧伤 发布于 2021-11-24 字数 365 浏览 795 回复 7

这个是chrome的,正常

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

怎么解决好呢?syntaxhighlighter 3.083

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

南汐寒笙箫 2021-12-01 7 楼

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

滥情空心 2021-12-01 6 楼

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

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

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

chrome中显示效果如下

屏蔽前

屏蔽后

自此以后,行同陌路 2021-12-01 5 楼

感谢

后知后觉 2021-12-01 4 楼

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

引用来自“joshuazhan”的评论

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

好听的两个字的网名 2021-11-28 3 楼

引用来自“joshuazhan”的评论

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

左岸枫 2021-11-26 2 楼

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

彩扇题诗 2021-11-26 1 楼

有样式冲突了