之前在在痞客邦使用 SyntaxHighlighter 為程式碼上色這篇文章提到如何使用，但在實際使用了一段時間之後就發現到一個問題：
overflow 的捲軸顯示不正常，尤其是在只有一行的程式碼時。

在不同瀏覽器下有不同的情況，例如：

  • IE7: 高度少一行，所以只有一行又有捲軸時，區塊剩下捲軸，看不到程式碼。
  • IE8: 只有一行時，該有捲軸卻沒有。(早期的 Firefox 版本也有，現在已經沒有了)
  • Chrome 和 Safari: 垂直卷軸一直存在。

總之有很多問題，在花了不少時間研究之後，終於改出了一個稍微正常的版本，在 Firefox、Chrome 和 Safari 實測看起來都正常，但是 IE8 單行仍然不是很正常，但勉強可用；IE7 單行時正常，但多行時仍然會少一行而出現垂直卷軸。

除此之外，將關於的按鈕移到左邊，不會擋住程式碼。

修改 shCoreDefault.css 的部分程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  /* modified by emn178 */
  line-height: 1.13em !important;
  /* modified by emn178 */
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  /* modified by emn178 */
  /*right: 1px !important;*/
  /* modified by emn178 */
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}

另外針對 IE8 以下的版本額外使用另外的 CSS，並透過條件式註解額外引用：

1
2
3
4
.syntaxhighlighter {
  min-height:33px !important;   /* IE 8 */
  *min-height:34px !important;  /* IE 7 */
}

其他樣式也可以依這個方式修改。

這邊提供修改過的 shCoreDefault.css：
http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/shCoreDefault.css
http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/ie.css

可以直接將css引用改成下面這個

1
2
3
4
<link type="text/css" rel="stylesheet" href="http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" href="http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/ie.css"/>
<![endif]-->