<pre> tag not formatting newlines/tabs correctly

Question

I am currently in the process of updating a site to be more responsive/mobile friendly. I have everything working wonderfully with one exception, <pre> formatted code samples. The content is being served by a blog engine, and the difference is entirely between themes. Reverting to the original theme, everything worked great again.

Here is the original display of <pre> code samples properly formatted:

Here is the underlying element's markup as seen by Chrome:

After updating the CSS however, pre formatted code isn't displaying properly, instead it appears like this:

In Chrome, the CSS is virtually identical:

For some reason with the new layout/markup, I simply cannot get the formatting to work properly, even though the styles being applied to the pre tag are effectively identical. I've tried setting white-space: pre and white-space: pre-wrap, at various levels with no effect. I added word-wrap to support resizing existing content down, removing or adding it has no effect. I've tried changing the display: type, the parent container, changing overflow types, etc. All to no effect. I simply can't figure out why the <pre> tags seems to be ignoring the whitespace settings.

FYI, the site link is here if you are interested. The original CSS theme is here, and the new CSS theme is here. You can see a screwed up source example here.

EDIT to add calculated CSS results, although it all appears to be minor formatting differences:

Good/old calculated:

New/broken calculated:

EDIT -- SOLUTION

It ended up being the Render() method of a MasterPage for a BlogEngine theme has logic to strip whitespaces from the rendered results. So CSS and whitespace was a red herring, there was no whitespace to strip.

Answer 1

似乎你的例子中的格式搞砸了。 whitespace指令不执行任何操作，因为实际上没有剩余的空白要保留。我下载了您的页面并快速添加了一些换行符和标签。现在前几行看起来正确（就我添加格式而言）：

以下是html文档的两个版本之间的差异：http://pastebin.com/KTh9BTGi（忽略“文件末尾没有换行符”部分）。也许您在服务器上添加了一些删除换行符和不必要空格的代码？

Answer 2

Well, it seems any HTML tag was not closed properly on the new HTML Theme markup. If you are editing your blog on the browser, copy/paste the html code into a great text editor with language syntax support and verify if syntax highlight gets crazy at some line.