Минимальная ширина CSS в IE6, 7, и 8
Я нашел много ответов на этот вопрос на Google, но ни один из них, кажется, не работает на все браузеры.
Я ищу способ только для CSS получить минимальную ширину, работающую над Firefox, IE6, IE7 и IE8. Это известно, что IE не поддерживает минимальную ширину, таким образом, несколько взломов там, чтобы попытаться эмулировать поведение минимальной ширины. К сожалению, у меня не было удачи с ними.
А именно, это - то, что я пытаюсь сделать:
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.</td>
<td>Link</td>
</tr>
</table>
У кого-либо есть способ заставить это работать?
2 ответа
Оказывается, необходимый хак для того, чтобы min-width работал во всех браузерах, не так уродлив, как многие его представляют.
Все, что мне пришлось сделать, это добавить CSS для div внутри largeCell и добавить пустой div в конец ячейки. Высота div составляет всего 1px, поэтому он не заставляет ячейку выглядеть больше, чем она должна быть.
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
table.dataTable td.largeCell div {
margin: 0px 0px 0px 0px;
height: 1px;
width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.
<div></div>
</td>
<td>Link</td>
</tr>
</table>
Я использую:
min-width: 200px;
_width: 200px; /* IE6 */