Минимальная ширина CSS в IE6, 7 и 8 - PullRequest
15 голосов
/ 01 марта 2010

Я нашел много ответов на этот вопрос в 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>

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

Ответы [ 8 ]

14 голосов
/ 01 марта 2010

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

Все, что мне нужно было сделать, это добавить CSS для div в largeCell и добавить пустой div в конце ячейки. Высота div составляет всего 1 пиксель, поэтому ячейка не выглядит больше, чем должна быть.

<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>
7 голосов
/ 01 марта 2010

Я использую:

min-width: 200px;
_width: 200px; /* IE6 */
3 голосов
/ 12 октября 2011
min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');
2 голосов
/ 26 ноября 2012

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

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

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

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

2 голосов
/ 09 июля 2012

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 голос
/ 05 февраля 2013

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

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

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

Это в основном говорит, что если ширина меньше 980px, установите ширину 980px.Если оно шире, установите ширину 95%.

1 голос
/ 17 сентября 2012

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

overflow: visible

элементу

0 голосов
/ 11 сентября 2010
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...