Все про Max-width, max-height, min-height, min-width в IE


Содержание

max-height и min-height резиновый блок

13.03.2013, 21:40

Блок на растягивается на height:100%; min-height: 100%;
Подскажите пожалуйста, почему мне не получается растянуть блок во всю высоту браузера? Вроде бы.

Max-heigth и min-height в одинаковых div-блоках
Здравствуйте, господа! Может быть найдутся профессионалы, которые помогут решить такой вопрос. У.

Аналог min-width, min-height в CSS 7 13.03.2013, 21:48 2 13.03.2013, 21:50 [ТС] 3 13.03.2013, 21:55 4

13.03.2013, 21:55
13.03.2013, 22:04 [ТС] 5
13.03.2013, 23:04 6

приведи код. и объясни что хочешь сделать

Добавлено через 10 минут
Может ты хочешь создать резиновое изображение. вот ссылка почитай.
Есть еще если надо будет

13.03.2013, 23:38 [ТС] 7

приведи код. и объясни что хочешь сделать

Добавлено через 10 минут
Может ты хочешь создать резиновое изображение. вот ссылка почитай.
Есть еще если надо будет

14.03.2013, 11:03 8
14.03.2013, 11:03
14.03.2013, 11:03

DOCTYPE с min-height
Но ведь мой браузер понимает что я пишу даже без этого. Не указав этот тег я написал весь свой.

min-height не работает
у одного блока есть свойство min-height:700px; при наполнении содержимого больше чем 700 пикселей.

не срабатывает min-height
Здравствуйте. Есть блок, оборачивающий страницу. У него свойство height: 100%; min-height: 600px;.

max- min w > 24.04.2020 Admin Вёрстка

Рассмотрим 2 способа хакать min- и max-width для ie6

1) expression
2) таблица с распоркой

Итак,
Первый способ. EXPRESSION

допустим, нам нужен блок макс. шириной 400px и с мин.шириной 300px
для ие6 пишем

min-height вообщето имеет более простой код, так что легко можно обойтись и без expression:

Второй способ. Таблица с дивом внутри

Повторю, что это хак для ие6! в остальных случаях min- и -max width работает итак

Высота и ширина элемента в CSS, использование префиксов min и max

При работе с каскадными таблицами стилей css, одними из наиболее часто используемых свойств являются свойства height (высота) и width (ширина). Они применяются к блочным элементам. Высота и ширина не включают толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента. Это добавит к элементу полосу прокрутки.

В качестве значений свойств height и width принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt), проценты (%) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если размеры родительского элемента явно не указаны, то в его качестве выступает окно браузера.

Даже если вы только начали работать с CSS, очень может быть, что вам уже довелось использовать свойства height и width. Однако вы могли заметить, что данные свойства могут накладывать лишние ограничения на элементы страницы. Поэтому полезно знать и применять связанные свойства, использующие префиксы «min» и «max».

min-width / min-height

Свойства min-width и min-height принимают значения единиц измерения таким же образом, что и свойства height и width, таким образом нет разницы в синтаксисе. Можно использовать любые приемлемые единицы измерения, включая пиксели, единицы em и проценты.

Данные свойства указывают браузеру как отображать элемент при минимальном размере. Вот пример использования обоих свойств:

Блочный элемент с таким кодом будет иметь минимальные размеры 200 на 200 пикселей даже если элемент пустой. Однако, поскольку блочный элемент будет по умолчанию занимать всю доступную ширину, только значение min-height в реальности будет иметь значение.

Чтобы увидеть эффект от min-width можно для данного элемента добавить свойство float.

max-width / max-height

Так же, как и в случае с префиксом «min», свойства max-width и max-height имеют обычные единицы измерения. Но на этот раз вместо минимального размера элемента, данные свойства задают максимальный размер. Еще один пример:


Обратите внимание, что сейчас я указал процентные значения для ширины и высоты, но ограничил максимальные ширину и высоту 200 пикселями. Ширина в 15% рассчитывается исходя из размера родительского элемента. Но даже если родительский элемент равен 5000 пикселей в ширину, блок с селектором класса .element будет не шире 200 пикселей, что и является заданной максимальной шириной.

Вывод

Вам придется очень часто использовать минимальную/максимальную ширину и высоту в своем коде CSS. Поэтому нужно хорошенько разобраться в тонкостях их применения. Хотя тут нет ничего сложного, но у неопытного пользователя часто возникают некоторые трудности при их использовании. Если у вас возникнут какие-либо затруднения — напишите о них в комментариях. Я постараюсь Вам помочь.

CSS Height and Width

Установка высоты и ширины

Свойства height и width используются для задания высоты и ширины элемента.

height и width могут быть установлены в Auto (это по умолчанию. Означает, что обозреватель вычисляет высоту и ширину) или указывается в значениях длины, таких как px, cm и т. д., или в процентах (%), содержащихся в блоке.

Пример

Пример

Примечание: Свойства height и width не включают заполнение, границы или поля; они устанавливают высоту/ширину области внутри заполнения, границы и поля элемента!

Установка Макс-ширина

Свойство max-width используется для задания максимальной ширины элемента.

max-width может быть задано в значениях длины, таких как px, cm и т.д., или в процентах (%), содержащихся в блоке, или значение None (по умолчанию. Означает, что максимальная ширина отсутствует).

Использование max-width вместо этого, в этой ситуации, улучшит обработку браузера небольших окон.

Совет: Перетащите окно браузера в меньшую ширину, чем 500px, чтобы увидеть разницу между двумя div!

Примечание: Значение свойства max-width переопределяет width .

В следующем примере показан элемент

Пример

Попробуйте примеры

Установка высоты и ширины элементов
В этом примере показано, как задать высоту и ширину различных элементов.

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

Установить минимальную ширину и максимальную ширину элемента
В этом примере демонстрируется, как задать минимальную ширину и максимальную ширину элемента, используя значение пиксела.

Установить min-высоту и максимальную высоту элемента
В этом примере показано, как задать минимальную высоту и максимальную высоту элемента, используя значение пиксела.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Полное руководство по укрощению IE6

На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera и Safari. Между тем, IE6 продолжает преследовать наши дизайны, скрываясь в темных местах, а умирает мучительно долго, в агонии. Поскольку мы ожидаем наступление того великого и светлого дня, когда IE6 окончательно умрет, так же как Netscape 4, давайте вспомним о некоторых пользователях, которые, по различным печальным причинам, продолжают мучиться с этим ужасным браузером.

Так что давайте отпразднуем последние дни IE6, с этим окончательным руководством по укрощению дикого зверя IE6.

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

Использование условных комментариев для IE6

Условные комментарии играют важную роль в нормальном поведении IE6. Условные комментарии это небольшие фрагменты кода, которые включаются в вашу (X)HTML разметку, что позволяет вам направить или отфильтровать определенные версии Internet Explorer. Далее пример условного комментария, которые перенаправляет IE6 специальным сообщением:

Это очень полезный метод добавления кода и контента только для IE6. Другие браузеры, увидев этот условный комментарий, определят его как обычный (X)HTML -комментарий и просто проигнорируют его. Таким образом, когда мы адаптируем наши веб-страницы для IE6, условные комментарии позволят нам применить специальные CSS-стили, без вмешательства в остальные браузеры. Хотя условные комментарии являются изобретением Microsoft, они являются лучшим хаком для конкретных версий Internet Explorer.

Простейший способ использования условных комментариев для направления и применения стилей только для IE6 – это подключить CSS-файл только для IE6, в секции ваших веб-страниц:

Затем, в файле ie6.css, мы можем разместить все IE6-хаки и другие уловки, требующиеся этому браузеру. Это позволит нам объединить все IE6-стили в один CSS-файл, который будет полностью игнорироваться другими браузерами. С таким методом применения стилей к IE6, нет необходимости в использовании IE6-хаков, так называемый «star-HTML» хак, или хак с подчеркиванием.

Направление и фильтр IE6 c «встроенными» CSS-хаками

Несмотря на пользу условных комментариев, бывают случаи, когда вам может понадобиться применить IE6-стили, без использования дополнительного CSS-файла. Такая ситуация может возникнуть на этапе разработки сайта, когда гораздо более удобно работать с одним файлом стилей, в котором стили для IE6 расположены рядом с «нормальными стилями», для простого сравнения. После того как разработка завершена, все встроенные CSS-хаки можно объединить в специальный IE6-CSS-файл, включенный с помощью условных комментариев.

К счастью, с появлением IE6, этих встроенных CSS-методов появилось достаточное количество. Через несколько лет, некоторые из этих «хаков» поднялись в топе, оказавшись чрезвычайно полезными и эффективными для применения к IE6. Наверное, самый распространенный из таких встроенных CSS-приемов, хак под названием «star-HTML»:

В то время, как соответствующие стандартам браузеры игнорируют этот нелогичный селектор, IE6 трактует его как допустимый селектор, даже если html самый высокий элемент в дереве документа. Это позволяет нам применить CSS-стили только для IE6, без вмешательства в другие браузеры. Лучшее из всего то, что этот метод для IE6 полностью правилен.

Также бывают случаи, когда нам необходимо спрятать стили от IE6. Следующий хак предлагает решить это с помощью «фильтра дочернего селектора», что позволит нам применить CSS-стили ко всем браузерам, за исключением IE6:

Этот селектор также полностью валидный и применяется ко всем, соответствующим стандартам, браузерам. Этот метод весьма эффективен, так как IE6 просто не понимает этот селектор.

Другие полезные методы направления и фильтрации IE6, включают хак !important , который очень удобно использовать когда вам нужно отменить значение свойства для IE6:


Когда эти два одинаковых свойства находятся в одном селекторе, IE6 применит второе свойство, если первое свойство включает директиву !important . Другие браузеры конечно же применят декларацию !important , тем самым позволив нам применить к IE6 другие значения свойств.

Включение поддержки альфа-прозрачности у PNG

Одним из самых печальных дефектов в IE6, является отсутствие поддержки 32-битной альфа-прозрачности у PNG-изображений. При отображении в браузере 32-битных альфа-прозрачных PNG, IE6 заменяет всю прозрачность на безобразный серый фон. К счастью, это хорошо известная и часто встречаемая проблема, для которой существует большое количество обходных путей и решений.

Если отложить в сторону запрет на использование альфа-прозрачных PNG-изображений в целом, возможно, самый простой способ обеспечить визуальную совместимость с IE6 – это использовать полностью прозрачные PNG, которые полностью поддерживаются и правильно отображаются во всех браузерах, включая IE6.

Наиболее практичным подходом будет использование 8-битного, альфа-прозрачного формата PNG, вместо обычного 32-битного формата. Чтобы его получить, используйте программу Adobe Fireworks (Photoshop этого не умеет), сохраните свое альфа-прозрачное PNG-изображение в 8-битном формате, и затем включите в свой дизайн, как обычно. 8-битные PNG, возможно, не так красиво выглядят как 32-битные версии, зато в IE6 они будут выглядеть, так же как и в других браузерах. Этот метод позволяет вам применять альфа-прозрачность во всех современных браузерах, без получения уродливого серого фона в IE6.

Конечно, есть возможность включить в IE6 поддержку 32-битной альфа-прозрачности. Существует множество различных скриптов, включающих такую функциональность, но все они основываются на разработке Microsoft, фильтре AlphaImageLoader , который можно включить в ваш CSS-файл следующим образом:

Чтобы заставить это работать, вам понадобится скачать эти два файла, и расположить их в той же папке, что и ваш CSS-файл. Первый файл – это прозрачное gif -изображение, и второй файл это HTC -скрипт, предоставляющий IE6 (и ниже) функциональность, которая требуется для 32-битной альфа-прозрачности. Это базовая реализация фильтра AlphaImageLoader , более расширенная функциональность также возможна, с использованием большого количества бесплатных скриптов. Вот некоторые из моих любимых:

Исправление полей и отступов

Ранние версии Internet Explorer неправильно интерпретировали модель боксов, включая рамки и внутренние отступы при подсчитывании ширины контента. Например, взгляните на следующий случай:

В современных браузерах, высота и ширина этого блока, будет рассчитана в соответствии со спецификацией W3C как 100px + 20px +20px = 140px . В ранних версиях IE, несмотря на это, и высота, и ширина, будет ошибочно рассчитана в 100px . Это различие отвечает за разработку множества несоответствий между соответствующими стандартам браузерами и старыми версиями Internet Explorer.

К счастью, неправильная модель боксов была пересмотрена в IE6, который оказался способен возвратить правильную ширину для веб-страниц, включающих полный DOCTYPE . Когда присутствует полный DOCTYPE , IE6 включает один из двух «поддерживающий стандарты режим» или «почти поддерживающий стандарты режим», оба этих режима, позволяют IE6 правильно интерпретировать боксовую модель. Если же полный DOCTYPE не включен в веб-страницу, IE6 вернется в «quirks mode», и будет интерпретировать боксовую модель неправильно.

Таким образом, проблема боксовой модели легко решается в IE6, путем включения полного DOCTYPE и дальнейшей работы в стандартном режиме. Но если вам вдруг понадобится поработать в режиме quirks mode, простейший способ избежать применения внутренних отступов и рамок к элементам — задать им точную ширину. Вы всегда можете применить внутренние отступы и/или поля к закрытым элементам.

Несмотря на эти решения, могут возникнуть ситуации, когда необходимо точно контролировать высоту и ширину конкретных элементов. В этих случаях, мы можем использовать для этого «Tan Hack»:

В первом наборе правил, мы применяем ширину и высоту в качестве обычных значений, для соответствующих стандартам браузеров. Затем, во втором наборе правил, мы просчитываем неправильную боксовую модель в IE5 и IE6, в режиме quirks mode , путем корректировки значений высоты и ширины, включая дополнительные отступы и ширину рамки.

Установка min-width/max-width и min-height/max-height

Помимо боксов, IE6 не понимает максимальной и минимальной высоты и ширины. Это невероятно печальный факт для разработчиков, поскольку множеству макетов требуются эти свойства для нормального функционирования. В современных браузерах, мы можем использовать следующий CSS для достижения различных целей:

Конечно же, этот способ слишком простой для Internet Explorer, который абсолютно не понимает эти базовые CSS-свойства. К счастью, IE поддерживает свой собственный, проприетарный атрибут expression (выражение), который позволяет нам использовать JavaScript-выражения для управления свойствами (X)HTML -документа, такими как max/min-width и max/min-height . Например, для того, чтобы указать значение width с помощью атрибута expression , нам нужно написать следующее:

…Что эквивалентно этому

Существует два минуса в использовании атрибута expression . Во-первых, поскольку выражения, по сути являются JavaScript-ом, они не будут работать с отключенным JavaScript-ом в браузере пользователя. Во-вторых, использование CSS-выражений для свойств min/max , очень ресурсоемко и может отрицательно повлиять на производительность браузера. Однако не стоит забывать, что свойства max/min-widths/heights являются важным инструментом в работе веб-дизайнера. Так что, принимая во внимание эти факторы, смотрите далее некоторые полезные CSS-выражения, включающие полную функциональность min/max в IE6.

max-width

min-width

max-height

Хорошая новость в том, что мы можем пропустить безумные JavaScript/CSS выражения, когда применяем минимальную высоту в IE6. Благодаря Dustin Diaz, мы можем установить min-height в IE6, с этим фрагментом CSS:

min-height

Устраняем баг с двойными полями

Большинство веб-дизайнеров, занимающихся разработкой сайтов хорошо знакомы с проблемой двойных полей в IE6. Этот противный баг появляется когда вы назначаете float любому элементу (такому как div ) в одной директиве, а затем применяете поля в той же самой директиве. Например, если мы сделаем так:

..IE6 (обычно) удвоит размер поля до 20px , без каких-либо оснований. Нет нужды говорить, что это баг двойных полей разрушил множество прекрасных дизайнов, вызывая боль и страдание разработчиков.

К счастью этот баг легко убить. Просто изменить тип отображения элемента, к которому применяется float , с типа block на тип inline , следующим образом:

Это решает баг с двойными полями 99% случаях. В тех же случаях, когда это решение не помогает, вы можете обойти эту проблему, путем удаления полей и установки внутренних отступов у родительского элемента, или непосредственно у элемента, к которому применен float .

Чистка потока

Чистка потока от флоатов – другая общеизвестная задача, не только в IE6, но и во многих современных браузерах. В идеальном мире, одни элемент, содержащий другой плавающий элемент, полностью изолирует его от окружающих элементов. А в реальном мире веб-браузеров, флоаты, зачастую не изолированы. Когда такое случается, мы обычно говорим, что плавающий элемент не был «очищен» его родительским элементам. Хорошая новость в том, что существуют различные, простые способы чистить флоаты в IE6 и других браузерах.

Один из старейших способов очистить поток от флоата – использовать clearfix хак. Эта CSS-техника, работает посредством генерации контента после родительского элемента, используя CSS-псевдо-класс :after . Сгенерированный контент, впоследствии чистит плавающий элемент. Далее типовой пример:

Чтобы использовать этот метод очистки потока, расположите его в вашем CSS-файле, и замените все строки .clearfix на селектор элемента, который нуждается в очистке от своих плавающих потомков.

Другой CSS-метод очистки потока – просто назначить float элементу-контейнеру. Например, если вы назначаете float картинке, находящейся в контейнере div который не изолирует ее, просто используйте следующий CSS:

Затем, если содержащий элемент, должен вести себя как обычный, блочный элемент, примените к нему ширину в 100%, чтобы убрать пространство для следующего элемента.

Все бы хорошо, но есть способ очистки потока и получше этого. Просто примените свойство overflow , к контейнеру div , и он автоматически будет расширяться по вертикали и очищать float у дочерних элементов. Вот пример:

Назначение ширины для блока обязательно для Internet Explorer и Opera, но это не значит, что ширина должна быть равна 100%, вы можете использовать любую ширину и единицы измерения, которые посчитаете нужными. Если не хотите указывать ширину ( width ), вместо этого вы можете указать высоту ( height ). Для свойства overflow , также, могут быть использованных любые из перечисленных значений:

  • auto – отображает полосы прокрутки, если контент превышает указанную ширину
  • hidden – никогда не отображает полосы прокрутки, даже если контент не умещается в указанные размеры
  • scroll – всегда отображает полосы прокрутки, даже если в них нет необходимости.

Также, этот метод работает для очистки потока от плавающих элементов, бывают случаи, когда свойство overflow может помешать другим аспектам дизайна. Если это случится, вы можете попробовать ограничить применения overflow , используя overflow-x: hidden или overflow-y: hidden . И помните, что значение ширины элемента, можно заменить на значение высоты.

Устранение других проблем IE6


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

Относительное позиционирование

Использование position: relative в своей работе, возможно, самый простой способ внести путаницу в IE6. Современные браузеры, без проблем отображают вложенные элементы, позиционированные относительно, но в IE6, зачастую появляются проблемы с чуть более сложной раскладкой. К счастью, есть довольно простое решение – установка hasLayout , путем добавления zoom:1; каждому, относительно позиционированному, элементу.

Помните, что вы не должные применять zoom:1; к любым строковым ( inline ) элементам, потому что, в этом случае IE6, будет трактовать их, как блочные элементы. Не забывайте об этом, и в следующих решениях.

Отрицательные поля

Отрицательные поля очень полезный прием во множестве различных раскладок, и большинство браузеров справляются с ними без проблем. К сожалению IE6 не любит отрицательных полей, пока вы не примените относительного позиционирования к целевому элементу:

Помните, о назначении блоку zoom:1 , которое необходимо, потому что это относительное позиционирование.

Устранение проблем с overflow

Использование overflow в IE6 иногда может привести к неожиданным, необъяснимым проблемам с отображением. К счастью, мы можем разрешить множество overflow -зависимых проблем, путем установки hasLayout с помощью – как вы уже, наверное, догадались – zoom:1 . Далее пример:

Другая, странная проблема с overflow , связана с установкой свойства f ont-style: italic , которое растягивает ширину родительского элемента. Эта проблема решается, путем применения следующего CSS к родительскому элементу:

Выстраивание плавающих элементов

Когда вы применяете float к элементам с фиксированной шириной, они располагаются горизонтально, заполняя всю ширину родительского элемента. По крайней мере так ведут себя блоки, в большинстве браузеров. В IE6, плавающие блоки не будут выстраиваться в одну линию, вместо этого, они скорее выстроятся лесенкой. Хорошая новость в том, что есть целых два решения этой проблемы. Первое – это применить свойство line-height: 0 , к родительскому элементу:

Другой способ – по очереди указать каждому плавающему элементу, свойство d isplay: inline .

Устранения проблем со списками

Наконец, если IE6 решит добавить дополнительные строки ( li ) после окончания вашего списка ( ul ), добавления HTML-комментария, волшебным образом решит эту проблему. Вот как будет выглядеть ваш код до и после применения этого комментария:

До:

После:

Напоследок

Конечно все без исключения верстальщики, и многие обычные пользователи не любят Internet Explorer версии 6, но взгляните на результаты голосования за две недели:

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

Перевод статьи «Definitive Guide to Taming the IE6 Beast«, автор Jeff Starr

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

max-height

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента

Значения свойств Высота
min-height max-height max-height
min-height > height > max-height min-height
min-height > height height ) больше значения max-height , то высота элемента принимается равной значению max-height .

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме строчных и таблиц
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none Отменяет действие этого свойства.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования свойства max-height

Объектная модель

Спецификация ?

Спецификация Статус
CSS Intrinsic & Extrinsic Sizing Module Level 3 Рабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация


Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

7 12 1 7 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Cross-Browser Min Height

Easily manage projects with monday.com

This works because (thankfully?) IE treats «height» how «min-height» is supposed to be treated.

Alternate Using Expressions (IE Only)

Sets the minimum height in IE to be 500px. Make sure that this.scrollHeight

Comments

Does this only apply to IE6? Doesn’t IE7 support min/max height/width?

Does this apply to % values as well?

I hate to be obvious but:

div <
min-height: 500px;
_height: 500px;
>

Easier to read and works does it not?

Underscore hacks will make your css invalid, and using ie expression can impact performance so that’s why the first snippet is so cool :)

Thanks a shitton! :D

The one thing about some of these tricks is that if you were to use this trick in ie 7 and up you would have to have the correct doc type in order for the standards based css property to work properly. This is true for ie6 as well. I really do not like how IE fragmented itself and the html css programmers as well. In the beginning there were only two real browsers and that was the whole start of this proprietary swing by M$ to get people to program for IE that way it forces the user to use IE. Now that is gone the backward compatibility that is needed for M$ to keep up its selling capability is now finally getting squeezed out of the latest version of IE. It is my understanding that IE10 is way better than even IE9. I still need to test some of these great features and even then this may depend upon the doc type again.

I would like to high five you through the internets. Thank you!

Can I use CSS min/max-width/height?

Compatibility table for support of CSS min/max-width/height in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

CSS min/max-w > — REC

Global usage

Method of setting a minimum or maximum width or height to an element.

  1. 5.5
  2. 6
  3. 7

  4. 8
  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76

Firefox

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

Изображения max-width max-height не работает в IE 11

Я использую fullPage.js и следующие html и css для слайдера изображения на моем веб-сайте.

Он работает в Safari и Chrome на Mac, но не в IE 11 в Windows.

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

Сожалею. Это проще, если вы обрабатываете файл CSS. Вам нужны CSS-хаки, это что-то вроде примера:

Вам нужно изменить все свои CSS для обеспечения совместимости с браузером.

надеюсь, это поможет

Следующий медиа-запрос устранил мою проблему с IE 11.

Использование единиц видового экрана vw и vh вместо процента для максимальной ширины и максимальной высоты.

Кажется, это ошибка в IE11: отчет об ошибке. Добавление flex: 1 (как в отчете)

Работает на меня. Возможно, вам придется изменить режим отображения контейнеров на flexbox. Подобно этому (пример центров содержимого):

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5345cb52dc438eb9 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Илон Маск рекомендует:  Iis об управлении веб узлом
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL