Как заставить IE поддерживать CSS свойства min-width / max-width? - PullRequest
Новая
       5

Как заставить IE поддерживать CSS свойства min-width / max-width?

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

Эти свойства не считаются стандартными CSS?

Я использую что-то вроде этого, которое правильно работает в Chrome 12, FF4, Opera 11 и Safari 5, но в IE9 минимальная ширина не соблюдается, если width < min-width. 

<span style="float:left; width:11%; min-width:150px;">
    ...
</span>

Редактировать: немного раздражен либеральным редактированием и переносом моего вопроса, но без. Вот более полный пример, который демонстрирует явное отличие IE9 от других браузеров. 

<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>

Редактировать 2: Как отмечено в комментарии Кевина ниже, добавление <!DOCTYPE html> в начало решает проблему IE.

Ответы [ 3 ]

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

Если то, что вы говорите, правда, IE9 будет отклоняться от формы спецификации . Однако я не могу дублировать вашу жалобу. Используя ваш пример, IE9 уважает min-width, если width меньше 150px на этого jsfiddle .

EDIT:

ПРИМЕЧАНИЕ. Режим Quirks следует другим правилам и не соответствует стандартному CSS в любом браузере. Если вы добавляете тип документа на страницу, это должно решить проблему (добавьте: <!DOCTYPE html>).

Чтобы расширить этот вопрос, режим Quirks не стандартизирован. В некоторых браузерах большинство реализовано, но в этих стандартах defacto новые функции не определены. Таким образом, некоторые браузеры разрешают использовать новый CSS (как вы уже заметили), но IE9 игнорирует новые значения CSS, поскольку им нет места в режиме Quirks.

4 голосов
/ 17 мая 2012

Я обнаружил, что <!DOCTYPE html> было недостаточно - мне пришлось пойти строго:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3 голосов
/ 16 мая 2013

Попробуйте следующий код: 

#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}

//html:
<div id="limit-size"></div>
...