在IE 8/9中不能按预期包装的元素 [英] Elements not wrapping as expected in IE 8/ 9
问题描述
然而另一个IE正在做与其他浏览器不同的问题，但这是一个略有不寻常的IE7做正确的事情，但IE 8和9不。
这里是情况，我有一个简单的3列布局。前2列是固定宽度，第三个是我想要的可变宽度，以便占用可用空间。
我在第三列输出文字资料。文本数据应该在数据值/句子结束时自由换行 - 所以我将其输出。
< 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 // ENhttp://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 =form1runat =server>
< div>
< div>
< div class =leftBit>左位< / div>
< div class =middleBit>此值包装 - 但我想将值保持在同一行< / div>
< div class =remainder>
< span>蓝色海和天空的颜色，< / span>
< span>首页的绿绿绿色，< / span>
< span>红色红色红色红色消防车红色红色红色红色< / span>
< / div>
< / div>
< div class =clear>< / div>
< / div>
< div>
< div>
< div class =leftBit>左位< / div>
< div class =middleBit>我不知道为什么这些值不包装？他们在FF和chrome和IE7，但不是IE8 / 9< / div>
< div class =remainder>
< span class =nowrap>蓝色海和天空的颜色，< / span>
< span class =nowrap>首页的绿绿绿色，< / span>
< span class =nowrap>红红色红色红色消防车红色红色红色红色< / span>
< / div>
< / div>
< div class =clear>< / div>
< / div>
< div>
< div>
< div class =leftBit>左位< / div>
< div class =middleBit>这里是我的工作 - 我必须在nowrap元素之间包括一些非whiite空间。这是一个错误或预期的行为？< / div>
< div class =remainder>
< span class =nowrap>蓝色海和天空的颜色< / span> ，
< span class =nowrap>家绿色绿色绿色< / span> ，
< span class =nowrap>红红红红红消防车红红红红红< / span>
< / div>
< / div>
< div class =clear>< / div>
< / div>
< hr />
< / form>
< / body>
< / html>
浏览器或不同规格之间。我相信Firefox是唯一的最新版本，将格式化你的期望。有一些长度的情况下，Chrome也会从父框中突破。
因此，需要在HTML中提供手动提示以获得一致的输出。 p>
在特定示例中，解决此问题的一种方法是使用零宽度空格的unicode字符。
< span class =nowrap> foo bar< / span> ;&＃8203;
< span class =nowrap> moo bahh< / span>
如果由于某种原因不能使用unicode代码，你可能想尝试html实体& thinsp; 这是一个稀疏的空间。
虽然这似乎是一个问题，应该在浏览器之间保持一致性， http://www.cs.tut.fi/~jkorpela/html/nobr.html 引用了几个技术文件以及它们如何破解文字之间的差异，以及这些文件的不同浏览器解释。
除了预格式化的元素 - - ，每个块结构元素都是通过获取其内容中的数据字符和其后代元素的内容，将它们连接，并将结果分割成由空格，制表符或记录结束字符（以及可能的连字符字符）分隔的单词，被视为段落。
，有两种类型的连字符：平假号和软连字符。普通连字符应该被用户代理解释为另一个字符。软连字符告诉用户代理程序发生换行符的位置。
请参阅 Unicode技术报告＃14 ：行拆分属性（技术性警报！），似乎允许一个直接中断字母数字字符和开始括号。这不是一个好主意，但一般。它甚至会允许非常不礼貌的休息！
Yet another "IE is doing something different from other browsers" question but this is one is slightly unusual in that IE7 does the correct thing but IE 8 and 9 do not.
Here is the situation, I have a simple 3 column layout. The first 2 columns are fixed width and the third I want to be variable width so that it uses up the available space.
I am outputting textual data in the third column. The text data should be free to wrap at the end of a data value/sentence - so I output it as .
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(See the example below also)
everything works like a charm in FF, Chrome and IE7 but internet explorer 8 and 9 treat the consecutive nowrap spans as 1 big nowrap element (i.e. it puts all the values on one line). There is white space between the spans and so (IMO) it should be free to wrap. The only way i can get IE8/9 to wrap as I want is to include some non-white space between the nowrapped spans.
This workaround is OK but I am curious to know:
- Is IE rendering the markup correctly or incorrectly (i.e. is my expectation that the values should wrap incorrect. I only assume that IE is at fault because the other browsers do it differently)
- Is there a more elegant solution that the one I have: In an ideal world, I would want to ensure that the separating comma never wrapped to the start of a new line.
Thanks in advance
<!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>
Determining word breaks isn't preformed the same in different browsers or between different specifications. I believe Firefox is the only latest release that will format the way you are expecting. There are certain length situations where Chrome will also break out of the parent box.
As such, manual hints need to be provided in the HTML to get consistent output.
In the specific example, a way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.
<span class="nowrap">foo bar</span>​
<span class="nowrap">moo bahh</span>
If for some reason you can't use the unicode code, you might want to try the html entity   which is a thin space. It will, however, introduce some additional space into your html output.
Although this seems like an issue where there should be consistency between the browsers, http://www.cs.tut.fi/~jkorpela/html/nobr.html quotes several technical documents and their differences between how words should be broken, in addition to the differing browser interpretations of those documents. I'm guessing each browsers overall strategy plays a part in this specific example.
Except for preformatted elements - -, each block structuring element is regarded as a paragraph by taking the data characters in its content and the content of its descendant elements, concatenating them, and splitting the result into words, separated by space, tab, or record end characters (and perhaps hyphen characters). The sequence of words is typeset as a paragraph by breaking it into lines.
Source: HTML 2.0, section Characters, Words, and Paragraphs
In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur.
Source: HTML 4.0, section Hyphenation
see Unicode Technical Report #14: Line Breaking Properties (technicality alert!), which seems to allow a "direct break" between an alphanumeric character and an opening parenthesis, for example. This is hardly a good idea in general, though. It would even allow very dishono(u)rable breaks!
这篇关于在IE 8/9中不能按预期包装的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
