Переполнение IE 8: скрытый и максимальная ширина - PullRequest
Новая
       1

Переполнение IE 8: скрытый и максимальная ширина

9 голосов
/ 13 декабря 2011

Я хочу отобразить текст в таблице и обрезать его, когда он шире, чем 150 пикселей, но я не хочу фиксированной ширины ячейки таблицы (если текст отсутствует, ширина будет 0 пикселей). Все работает в IE9, Firefox, Chrome, Opera, но не в IE8.

Пример кода в IE8:

enter image description here

Пример кода в Chrome:

enter image description here

Вот код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td, span {
    border: 1px solid red;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span {
    border: 1px solid green;
    display: block;
}
</style>
</head>
<body>
<table>
<tr>
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td>
    <td>Works in Firefox, Chrome (and Opera but no dots)</td>
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td>
</tr>
</table>
</body>
</html>

Это возможно сделать без какого-либо JavaScript или установки фиксированной ширины?

1 Ответ

5 голосов
/ 13 декабря 2011

К сожалению, IE7 и IE8 имеют очень ошибочную поддержку правила max-width css. Так что нет, вы не сможете сделать это надежно без JavaScript или фиксированной ширины. Если это поможет, у вас есть код для работы в IE 7 +.

Но вы можете сделать это только фиксированной шириной для этих двух браузеров, добавив условное правило css после правил, которые у вас есть выше: 

<!--[if lte IE 8]>
    <style>
    td, span {
        width: 150px;
    }
    </style>
<![endif]-->

Когда вы позже перенесете свой CSS во внешний файл, вы, конечно, измените его на тег ссылки: 

<!--[if lte IE 8]>
   <link rel="stylesheet" type="text/css" href="ie8.css" />
 <![endif]-->

Кроме того, вы можете обнаружить IE 7 и 8 с помощью JavaScript и перенаправить пользователя на эту страницу: http://www.mozilla.org/de/firefox/new/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...