我刚刚开始了一个编程博客，我正在使用SyntaxHightlighter进化插件来格式化我的代码。在大多数浏览器上，这一切都很正常。然而，如果我尝试从iPhone或iPad查看该网站，行号和代码将不再对齐。基本上，问题似乎是行号和代码字体的大小是独立的（见下图）。
我认为肯定有人看到了这个问题，所以我咨询了强大的甲骨文谷歌，但似乎找不到任何相关的东西。我也搜索了这个网站，但没有结果。
作为一名程序员，我查看了源代码，但意识到理解它的工作原理和解决问题需要一些时间。
我正在使用Wordpress版本3.1.2和二十个主题版本1.2
我激活了以下插件：
Google Analytics for WordPress版本4.1SyntaxHighlighter版本3.1.1
是否有其他人看到（希望已修复）此问题？还是有一个善良的灵魂能为我指明正确的方向？如果你需要查看该网站，我的个人资料中会有一个链接。我不想链接垃圾邮件；-）
提前谢谢！
更新日期：2011年5月17日
我以为我已经找到了解决方案，但尽管它在iPad上解决了问题，但在iPhone上仍然是个问题。所以悬赏案仍有待抓捕。
最合适的回答,由SO网友:idz 整理而成
事实证明，210主题的样式表（style.css）修改了pre 和code 独立进行。这似乎是导致问题的原因。此外，它增加了字体的大小，这导致它们与文本的其余部分相比太大。
以下是导致问题的原因：
/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */
pre {
-webkit-text-size-adjust: 140%;
}
code {
-webkit-text-size-adjust: 160%;
}
我注释掉了这两个部分：
/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */
/*
pre {
-webkit-text-size-adjust: 140%;
}
code {
-webkit-text-size-adjust: 160%;
}
*/
所以我想我正处在一个奇怪的位置来回答我自己的问题。感谢所有花时间看这个的人。尤其是@DaveKonopka，在撰写本文时，他是唯一提出可能解决方案的人。
SO网友:Dave Konopka
这似乎是一个问题SyntaxHighlighter 插件使用的底层js库。我自己加载了js演示，在iPhone上得到了相同的偏移结果。我仍然不清楚原因，但排水沟编号的字体大小与代码行不一致。
一种可能的修复方法是将边距数字上的字体大小调整一个小的百分比，以匹配代码。媒体查询可用于针对iPhone和iPad设备，并仅对其应用修复程序。
我在SyntaxHighlighter js包附带的示例中加入了以下代码。它解决了我iPhone上的问题。你可以把这个CSS放到你的WordPress主题中，得到同样的结果。
<style type="text/css">
/* ios safari line number fix */
/* ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
td.gutter div.line { font-size: 1.4em !important; }
}
/* iphone */
@media only screen and (max-device-width: 480px) {
td.gutter div.line { font-size: 1.4em !important; }
}
</style>
It部门
holds up well for me 包含冗长的代码片段（50多行）。我没有iPad可供测试。
