Chr*_*ell 5 html css internet-explorer internet-explorer-8 internet-explorer-9
还有一个"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包装的唯一方法是在现有的跨度之间包含一些非白色空间.
这种解决方法还可以,但我很想知道:
提前致谢
<!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>
确定单词分隔符在不同浏览器或不同规范之间不会相同.我相信Firefox是唯一能够按照您期望的方式格式化的最新版本.在某些长度情况下,Chrome也会突破父框.
因此,需要在HTML中提供手动提示以获得一致的输出.
在具体示例中,解决此问题的方法是使用unicode字符作为零宽度空间.这会破坏您的代码而不会引入额外的空间.
<span class="nowrap">foo bar</span>​
<span class="nowrap">moo bahh</span>
如果由于某种原因你不能使用unicode代码,你可能想尝试 一个很薄的空间的html实体.但是,它会在你的html输出中引入一些额外的空间.
虽然这似乎是浏览器之间应该保持一致性的问题,但是http://www.cs.tut.fi/~jkorpela/html/nobr.html引用了几个技术文档以及它们之间的区别如何被打破,除了对这些文档的不同浏览器解释.我猜每个浏览器的整体策略都在这个具体的例子中起作用.
除了预先格式化的元素 - - 之外,每个块结构元素都被视为一个段落,它通过获取其内容中的数据字符及其后代元素的内容,将它们连接起来,并将结果拆分为单词,由空格,制表符或记录分隔结束字符(也许是连字符).单词序列通过将其分成行来排版为段落.
在HTML中,有两种类型的连字符:纯连字符和软连字符.用户代理应将纯连字符解释为另一个字符.软连字符告诉用户代理可以发生换行的位置.
请参阅Unicode技术报告#14:换行属性(技术性警报!),它似乎允许在字母数字字符和左括号之间进行"直接中断".不过,这一般不是一个好主意.它甚至可以让你非常羞辱!