Syntaxhighlighter displays code shifted in Chrome&Safari

Apr 16, 2015 at 2:54 PM

I've just updated to the latest version of the blog and my code got shifted a bit. You can see that here
All the code blocks are shifted above the first line on Chrome-like browsers and Safari. They displayed correctly on IE and Firefox.

Any ideas how to fix it?
P.S. I've compared css files of previous version I had and they are the same.
Apr 16, 2015 at 3:21 PM
Found one more clue: this happens only with the Standard theme.
Apr 19, 2015 at 2:17 AM
Edited Apr 19, 2015 at 2:17 AM
Ok, seems like I found a workaround for this case. Still would be great if someone could point out what is a real and normal solution fo rthis since I hardly understand CSS and all this stuff so I can't find the root cause myself.
So the fix: to fix the layout we should open Custom/Themes/Standard/css/main.css and wrap
.syntaxhighlighter table td.code .container { top: -15px !important; } 
@-moz-document url-prefix() {
    .syntaxhighlighter table td.code .container { top: -15px !important; }
This way it looks correct on all the browsers I've tested.