Как я могу исправить мои CSS-поплавки в IE 6 и 7? Или как мне это лучше выложить? - PullRequest
Новая
       40

Как я могу исправить мои CSS-поплавки в IE 6 и 7? Или как мне это лучше выложить?

3 голосов
/ 11 мая 2011

Я пытаюсь выложить список задач, которые я создаю, и у меня возникают проблемы с выкладыванием отдельных задач. Основной макет состоит из задачи и имени пациента слева, а также даты создания и даты просрочки справа.

Проблема начинается, когда содержимое справа перекрывает содержимое слева. Во всех браузерах, кроме IE 6 и 7, содержимое справа просто опускается ниже содержимого слева, например 

Title    Date Created
Patient Name
         Date Overdue

В IE 6 и 7 содержимое слева и справа сжимается, как будто другой занимает все необходимое пространство, даже если его нет, например, 

Title            Date
              Created
Patient          Date 
Name          Overdue

Кто-нибудь делал подобный макет раньше и есть советы о том, как они решили это? Есть ли лучший способ выложить это, не используя поплавки? Ты ненавидишь IE, как я?

В настоящее время у меня есть приведенный ниже HTML & CSS (который выложен с использованием SASS) или см. этот 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 */
}

Ответы [ 3 ]

2 голосов
/ 11 мая 2011

Вы пробовали следующее? 

span {
    white-space: nowrap;
}
1 голос
/ 12 мая 2011

А как насчет этого ?

Структура HTML: 

<ul>
  <li class="task">
    <div class="line">
      <span class="task-date">Date Created</span>
      <span class="task-title">Task Title</span>
    </div>
    <div class="line">
      <span class="task-due-date overdue">Date Overdue</span>
      <span class="patient-name">Patient Name</span>
    </div>
  </li>
</ul>

CSS: 

.task {
  border: 1px solid red;
  min-height: 3em;
  width: 200px;
  padding: 0px;
}

.patient-name {
  font-weight: bold;
}

.task .task-date {
  float: right;
}

.line .task-due-date {
  float: right;
}

.task .overdue {
  color: red;
}
0 голосов
/ 11 мая 2011

Это сработало в вашем примере с jsfiddle.

<div class="task clear-fix">
    <div class="task-title">Title</span>
    <div class="task-date secondary">Date Created</div>
    <div class="patient-name">Patient Name</div>
    <div class="task-overdue-date">Date Overdue</div>
</div>

Также: before и: after не работают, например, 6 или 7. Вместо этого создайте прозрачный div для совместимости.

<div class="task clear-fix">
        <div class="task-title">Title</span>
        <div class="task-date secondary">Date Created</div>
        <div class="patient-name">Patient Name</div>
        <div class="task-overdue-date">Date Overdue</div>
    </div>    
<div class="clear"></div>

.clear
{
    clear: both;
}
...