0

在 IE7 中，标签内的多个换行符（使用<br />或<br>）<pre>将导致 IE7 将换行符折叠成单个换行符。为了证明这一点，您可以使用以下 HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            *
            {
                margin: 0px;
                padding: 0px;
            }
            .a, .b
            {
                float: left;
            }
            .b br
            {
                display: block;
            }
        </style>
    </head>
    <body>
        <pre class="a">Line 1a<br /><br />Line 2a</pre>
        <pre class="b">Line 1b<br /><br />Line 2b</pre>
    </body>
</html>

这将导致：（对于 IE7）

Line 1a Line 1b
Line 2a
        Line 2b

并且会导致：（对于其他浏览器：FF等）

Line 1a Line 1b
        Line 2b
Line 2a

正如您将看到的，我可以使用标签本身来解决这个display: block;问题。<br />但问题是，它不再适用于其他浏览器，因此它只是 IE7 的修复程序，因此无用，因为 IE7 不是真正的主要浏览器，将来也不会。

虽然这只是一个备注，而不是<pre>标签，你可以更好地在标签上使用 CSS 代码<div>：white-space: pre-wrap;word-wrap: break-word;为了模拟类似的行为，剩下要回答的问题是如何以跨浏览器的方式解决这个问题，而不需要 CSS hack 或特定的浏览器定位的 CSS 代码。

4

1 回答 1

1

我认为你应该使用 IE 条件注释。

是的，它是针对特定浏览器的 CSS 代码，但您正在编写正确的 HTML 注释。如果 IE 不是兼容的浏览器并决定阅读评论，那是他的问题。此外，如果这解决了您的问题，您还想要什么？

然后，您可以使用

<!--[if lte IE 7]>
<style type="text/css">
.b br{
    display:block;
}
</style>
<![endif]-->

在这里看到它：http: //jsfiddle.net/APj3Y/1/

于 2012-09-02T19:06:06.550 回答