僅針對Chrome使用SyntaxHighlighter的額外線條？

當我使用Chrome查看使用語法突出顯示器的草稿博客文章（博主）時，插入了額外的行，例如，僅針對Chrome使用SyntaxHighlighter的額外線條？

Chrome extra lines inserted

但在IE瀏覽器，它看起來罰款：

IE looks fine

任何想法，我做錯了什麼？

編輯：

對我使用SyntaxHighlighter的配置/設置如下：

<!-- Syntax Highlighter Additions START --> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushcsharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 

<script language='javascript' type='text/javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.all(); 
</script> 
<!-- Syntax Highlighter Additions END -->

編輯：

而生成的HTML是：

<pre class="brush: csharp;">using System; 
<br />using System.Text; 
<br />using System.Collections.Generic; 
<br />using System.Linq; 
<br />using Microsoft.VisualStudio.TestTools.UnitTesting; 
<br />using AccountTypeFollowUp; 
<br /> 
<br />namespace PluginsUnitTests 
<br />{ 
<br /> [TestClass] 
<br /> public class AccountTypeFollowUpTests 
<br /> { 
<br />  [TestMethod] 
<br />  public void AccountTypeFollowUp_Account_Is_Supplier() 
<br />  { 
<br />   throw new NotImplementedException(); 
<br />  } 
<br /> 
<br />  [TestMethod] 
<br />  public void AccountTypeFollowUp_Account_Is_Client() 
<br />  { 
<br />   throw new NotImplementedException(); 
<br />  } 
<br /> 
<br />  [TestMethod] 
<br />  public void AccountTypeFollowUp_Account_Is_Other) 
<br />  { 
<br />   throw new NotImplementedException(); 
<br />  } 
<br /> } 
<br />} 
<br /></pre>

來源

2012-08-04 glosrob

具有同樣的問題;它似乎在shCore.css文件的這部分原因引起的：

.syntaxhighlighter table td.gutter .line { 
    text-align: right !important; 
    padding: 0 0.5em 0 1em !important; 
}

如果我取代「填充」：

padding: 0 5px !important;

編號工作正常在Chrome（沒有Firefox和負面影響IE顯示），所以現在我有我的博客指向定製shCore.css而不是http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

來源

2012-08-07 16:15:57 Jane

是的，我發現如果我指出2.1版本，它也被修復了。我會嘗試定製版本，謝謝！ – glosrob 2012-08-07 17:29:11

我也面臨同樣的問題鉻 – srk 2012-08-09 17:03:21

定製腳本^^爲我工作。此外，如果你願意，鏈接到2.1版本，它適用於FF，IE和Chrome我 – glosrob 2012-08-09 21:31:27

粘貼之前<pre class="brush: js;">

<style> 
    .syntaxhighlighter table td.gutter .line { 
     padding: 0 !important; 
    } 
</style>

來源

2012-08-28 16:07:02 Roman

沒有必要引用不同的CSS文件。鏈接標籤引用shCore.css後下面的樣式塊粘貼：

<style> .syntaxhighlighter table td.gutter .line { padding: 0 5px !important; } .syntaxhighlighter table td.code .line { padding: 0 !important; } .syntaxhighlighter .gutter { padding-right: 1em !important; } .syntaxhighlighter table { padding-bottom: 1px !important; } </style>

.syntaxhighlighter table td.gutter .line增加圍繞每個行號水平填補5個像素。

.syntaxhighlighter table td.code .line刪除代碼行本身的所有填充。

.syntaxhighlighter .gutter在排水溝和代碼行之間增加了1 em的填充。

.syntaxhighlighter table解決了我用Chrome看到的溢出問題。對於水平溢出的代碼塊，Chrome正在渲染一個可以滾動1像素的垂直滾動條。將1個像素的填充添加到容器div中的表格中對其進行修復。

來源

2012-10-23 16:43:10 NathanAldenSr

我無法得到任何這些解決方案的工作。然而，在this issue的評論給了我解決方案...

打開模板編輯器（編輯HTML），並搜索'13px'。變量定義附近有兩個實例。我更新了字體大小到12px，並且一切正常。

 <Variable name="body.font" description="Font" type="font" 
    default="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

來源

2012-10-24 19:01:52 cloggins

與博主有同樣的問題。com和最新的Firefox。
我發現它是因爲類.container上的重疊樣式而發生的，所以基本上你必須在SyntaxHighlighter中將類重命名爲.containerSH。
查看我的commit: change .container -> .containerSH
現在它對我來說確實很好。

來源

2015-10-09 09:24:54

僅針對Chrome使用SyntaxHighlighter的額外線條？

回答

相關問題