css - 如何在 IE 6 和 7 上修复我的 css float ？或者我怎样才能更好地解决这个问题？

Question

我正在尝试列出我正在构建的任务列表，但在列出各个任务时遇到了问题。核心布局由左侧的任务和患者姓名以及右侧的创建日期和过期日期组成。

当右侧的内容与左侧的内容重叠时，问题就开始了。在除 IE 6 和 7 之外的所有浏览器上，右侧的内容仅位于左侧内容的下方，例如

Title    Date Created
Patient Name
         Date Overdue

在 IE 6 和 7 上，左侧和右侧的内容都被挤压，就好像另一个占据了必要的全部空间，即使实际上并没有，例如<​​/p>

Title            Date
              Created
Patient          Date 
Name          Overdue   

有没有人以前做过类似的布局并且有关于他们如何解决这个问题的提示？有没有更好的方法来布置它而不使用花车？你和我一样讨厌 IE 吗？

目前我有以下 HTML 和 CSS(使用 SASS 布局)或参见 this jsFiddle这说明了这个问题。

<li class="task clear-fix">
  <span class="task-title">{title}</span>
  <span class="task-date secondary">{dateCreated}</span>
  <span class="patient-name">{patientName}</span>
  <span class="task-overdue-date">{dateOverdue}</span>
</li>

li.task {
    .task-title,
    .patient-name {
        clear: left;
        float: left;
    }
    .task-date,
    .task-overdue-date {
        clear: right;
        float: right;
    }
}
.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear-fix {
    *zoom: 1; /* IE 6 & 7 only */
}

Answer 1

您尝试过以下方法吗？

span {
    white-space: nowrap;
}