Минимальная ширина CSS в IE6, 7 и 8

Я нашел много ответов на этот вопрос в Google, но ни один из них, похоже, не работает для всех браузеров.

Я ищу способ только для CSS, чтобы получить минимальную ширину, работающую над Firefox, IE6, IE7 и IE8. Хорошо известно, что IE не поддерживает минимальную ширину, поэтому есть несколько хаков, чтобы попытаться эмулировать поведение min-width. К сожалению, мне не повезло с ними.

В частности, это то, что я пытаюсь сделать:

<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>

Есть ли у кого-нибудь способ заставить это работать?

Ответы

Ответ 1

Итак, оказывается, что необходимый хак для получения минимальной ширины для работы во всех браузерах не так уродлив, как многие из них делают.

Мне нужно было только добавить 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>

Ответ 2

Я использую:

min-width: 200px;
_width: 200px; /* IE6 */

Ответ 3

min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');

Ответ 4

По умолчанию режим документа в IE будет режимом Quirks

Решение: добавьте doctype поверх страницы html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ответ 5

После стольких взломов, которые я пробовал, ни один из них не работает для меня для этой проблемы с минимальной шириной, но, наконец, я получил свое решение для IE 8.

Попробуйте использовать это: <!DOCTYPE html> как тип DOC, это тип HTML 5 DOC, который превращает вашу страницу IE8 в поведение как браузер Mozilla или Webkit.

Таким образом, для минимальной и минимальной высоты проблема очень облегчает многие проблемы IE8.

Если мой пост поможет вам отправить мне письмо с вашим именем, оно работает для вас.

Ответ 6

Попробуйте добавить:

overflow: visible

к элементу

Ответ 7

У меня была аналогичная проблема, мне нужен сайт, чтобы он составлял 95%, если он был меньше 980px.

Ничего здесь не работало, и в отчаянии я обратился к ответу Билла Берлингтона. Один из упомянутых выше не работал у меня, но если бы я использовал более надежное выражение, это сделало!

width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );

В основном это означает, что если ширина меньше 980 пикселей, установите ширину 980px. Если он шире, установите ширину 95%.

Ответ 8

<style type="text/css">
.table1 th a {
    display:inline-block;
    width:200px";
}
</style>

<table>
    <tr>
        <th><a>title1</a></th>
        <th><a>title2</a></th>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
</table>