Question

另一个“IE正在做一些与其他浏览器不同的问题”，但这是一个有点不寻常的，因为IE7做的正确，但IE 8和9没有。

这是情况，我有一个简单的3列布局。前两列是固定宽度，第三列是可变宽度，因此它占用了可用空间。

我在第三列输出文本数据。文本数据应该可以自由地包装在数据值/句子的末尾 - 所以我将其输出为。

<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>

（参见下面的例子）

一切都像FF，Chrome和IE7中的魅力一样，但是Internet Explorer 8和9将连续的nowrap跨度视为1个大的nowrap元素（即它将所有值放在一行上）。跨度之间有空白区域（IMO）应该可以自由包裹。我可以让IE8 / 9按照我想要的方式包装的唯一方法是在现有的跨度之间包含一些非白色空间。

这种解决方法没问题，但我很想知道：

IE是正确还是错误地呈现标记（即我的期望值应该包装不正确。我只假设IE出错，因为其他浏览器的方式不同）
我有一个更优雅的解决方案：在理想的世界中，我想确保分隔逗号永远不会包裹到新行的开头。

提前致谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
    <style type="text/css">
        .leftBit {float:left; margin-right: 10px; background-color: yellow;}
        .middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
        .remainder {margin-left: 420px;  min-width: 200px;background-color: #DDD;}
        .nowrap { white-space:nowrap;}
        .clear {clear: both;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
            <div class="remainder">
                <span>Blue the colour of the sea and the sky, </span> 
                <span>Green green green green of home, </span> 
                <span>Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">I don't know why these values do not wrap?  They do in FF and chrome and IE7 but not IE8/9</div>
            <div class="remainder">
                <span class="nowrap">Blue the colour of the sea and the sky, </span> 
                <span class="nowrap">Green green green green of home, </span> 
                <span class="nowrap">Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <div>
         <div >
            <div class="leftBit">Left bit</div>
            <div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements.  Is this a bug or expected behaviour?</div>
            <div class="remainder">
                <span class="nowrap">Blue the colour of the sea and the sky </span> ,
                <span class="nowrap">Green green green green of home </span> ,
                <span class="nowrap">Red red red red fire engine red red red red</span>
            </div>
         </div>
         <div class="clear"></div>
    </div>
    <hr />
    </form>

</body>
</html>

Answer 1

在不同的浏览器或不同的规范之间，确定单词中断不会相同。我相信Firefox是唯一能够按照您期望的方式格式化的最新版本。在某些长度情况下，Chrome也会突破父框。

因此，需要在HTML中提供手动提示以获得一致的输出。

在具体示例中，解决此问题的方法是使用unicode字符作为零宽度空间。这会破坏您的代码而不会占用额外的空间。

<span class="nowrap">foo bar</span>&#8203;
<span class="nowrap">moo bahh</span>

如果由于某种原因你无法使用unicode代码，你可能想尝试一个稀薄空间的html实体 。但是，它会在你的html输出中引入一些额外的空间。

虽然这似乎是浏览器之间应该保持一致性的问题，但http://www.cs.tut.fi/~jkorpela/html/nobr.html引用了几个技术文档以及它们之间的差异，除了对这些文档的不同浏览器解释之外。我猜每个浏览器的整体策略都在这个具体的例子中起作用。

除了预先格式化的元素 - - 之外，每个块结构元素都被视为一个段落，它通过获取其内容中的数据字符及其后代元素的内容，将它们连接起来，并将结果拆分为单词，用空格分隔，制表符，或记录结束字符（也许是连字符）。单词序列通过将其分成行来排版为段落。

来源：HTML 2.0，第Characters, Words, and Paragraphs部分

在HTML中，有两种类型的连字符：纯连字符和软连字符。用户代理应将纯连字符解释为另一个字符。软连字符告诉用户代理可以在哪里发生换行。

来源：HTML 4.0，第Hyphenation部分

请参阅Unicode Technical Report #14：换行属性（技术性警告！），这似乎允许在字母数字字符和左括号之间进行“直接中断”。不过，这一般不是一个好主意。它甚至会让非常非常糟糕的休息！

Answer 2

感谢@nosilleg的回答，我只使用CSS制作了一个很棒的解决方案。

鉴于你已经在使用类，这很容易，添加这个;

.nowrap:before {
    content : '\200B';
}

这样做只会在每个nowrap元素之前插入Zero Width Space字符，而无需编辑HTML！
现在，每次使用nowrap类时，您都不必记得添加那个讨厌的HTML实体。

在IE8和9中工作，并没有影响其他浏览器。

Answer 3

我希望IE9 / any可以通过在html的头部添加以下meta行来呈现为IE8 / any

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

然后它就像我们喜欢的时尚一样

元素未按IE 8/9中的预期包装

3 个答案: