相关疑难解决方法(0)

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

还有一个"IE正在做一些与其他浏览器不同的问题",但这是一个有点不寻常的IE7做正确的事情,但IE 8和9没有.

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

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

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

Run Code Online (Sandbox Code Playgroud)

(也见下面的例子)

一切都像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 …

Run Code Online (Sandbox Code Playgroud)

html css internet-explorer internet-explorer-8 internet-explorer-9

Chr*_*ell

lucky-day

5
推荐指数

1
解决办法

2992
查看次数