inline-элементы
Другая вещь меня убивает больше - в FF не работает ширина для inline-block элементов. Он ее просто игнорирует. IE6/7, Opera - все ок. В файрфоксе - никак. Осталось только в Safari проверить и в каком-нить Konquerer'е...
Ваши соображения?
Нет. Нужна новая строка используй элементы уровня блока. Р, DIV и продобные.
Другая вещь меня убивает больше - в FF не работает ширина для inline-block элементов.
И совершенно правильно.
http://shaelf.ru/book/css2/visudet.html#propdef-width
Область применения: все элементы, кроме [COLOR="Red"]незамещаемых элементов строкового уровня[/COLOR], строк таблиц и групп строк
http://shaelf.ru/book/css2/visudet.html#propdef-width
А на мой взгляд неправильно. Сначала цитаты из спецификации:
Значение: <length> | <percentage> | auto | inherit
Начальное: auto
Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
Это свойство не применяется к незамещаемым элементам инлайн-уровня. Ширина боксов незамещаемых инлайн-элементов, это ширина отображаемого внутри них содержимого (до любого относительного смещения дочерних элементов). Напоминаем, что инлайн-боксы всплывают внутри строчных боксов. Ширина строчных боксов задаётся их содержащим блоком, Но может быть уменьшена при наличии поплавков.
Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.
Совершенно верно. Т.е. мы не можем указать ширину для элемента, span, например. А для элемента input запросто, т.к. он является замещаемым (точно так же, как и для любого img).
Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.
А что же такое замещаемые элементы?
Элемент, для которого форматировщик CSS знает только внутренние размеры. В HTML элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT можно привести в качестве примеров таких элементов. Например, содержимое элемента IMG часто замещается изображением, на которое указывает атрибут "src". CSS не определяет, как находить внутренние размеры
Но все-таки идем дальше - к значению "inline-block" для свойства display. Видимо, все дело в том, что в спецификации CSS2 оно не оговорено (и FF его не поддерживает). Однако в спецификации CSS 2.1 написано:
'display'
Value: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
Computed value: see text
The values of this property have the following meanings:
..skipped..
inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
Переводим: "Это значение заставляет элемент генерировать блочный контейнер, который ведет себя как контейнер уровня строки, подобно замещаемому элементу. Внутренняя часть inline-block'а форматриуется как блочный контейнер, а сам элемент (внешние размеры) форматируется как замещаемый элемент.
Отсюда делаю несколько выводов:
1. Во-первых, задавать свойство "inline-block" для input'ов - не нужно и излишне, т.к. они и так являются замещаемыми элементами. Т.е., получается, что им и так можно явно задать ширину и это должно работать (оно и работает, проверял в FF, IE6/7).
2. Firefox не полностью поддерживает CSS 2.1 и свойство display: inline-block напрочь игнорирует (хотя его поддерживают, как я уже писал выше, Opera, IE6/7) - оно даже отсутствует в списке стилей элемента, которые показывает Firebug.
И все-таки очень интересно, будет ли это пофиксено и когда. Потому что, как мы уже разобрались, поведение это неправильное.
Прочти: "Приложение А. Пример таблицы стилей для HTML 4.0" в CSS2 спеце. В частности там и речи нет о INPUT, кроме того:
Это приложение [COLOR="Red"]не является нормативным[/COLOR], а носит только информативный характер.
В том же FireBug мог бы посмотреть и убедиться, что для input свойство display равно inline. Более того, так дело обстоит у всех браузеров. И это правильно.
Так что ни чего FF не игнорирует, и все там правильно.
А уж из фразы:
1. Во-первых, задавать свойство "inline-block" для input'ов - не нужно и излишне, т.к. они и так являются замещаемыми элементами. Т.е., получается, что им и так можно явно задать ширину и это должно работать (оно и работает, проверял в FF, IE6/7).
я понимаю что ты не совсем видимо хорошо представляешь себе модель работы CSS либо же выражаешься очень уж неправильно. Ибо для inline элементов width не должно работать.
Поэтому наверное стоит тебе перечитать CSS2 еще раз особо главы 8-10.
Вот Вам цитата из книги Эрика Мейера "CSS - каскадные таблицы стилей. Подробное руководство" на тему inline-block:
В соответствии с гибридным внешним видом имени значения, inline-block, строчно-блочные элементы и в самом деле представляют собой гибрид блочных и строковых элементов. Это значение свойства display введено в CSS 2.1.
Строчно-блочный элемент ведет себя по отношению к другим элементам и содержимому как строковый блок. Иначе говоря, он компонуется в строку текста, как это происходило бы с изображением, и, кстати, строчно-блочные элементы форматируются в строке как замещаемый элемент (e1vin: об этом я и писал в предыдущем сообщении). Это означает, что низ строчно-блочного элемента по умолчанию располагается на базовой линии строки текста и не разрывает строку.
Содержимое строчно-блочного элемента форматируется так же, как и для блочных элементов. К нему применяются свойства width и height, как это происходит для любого блочного или замещаемого строкового элемента, и эти свойства увеличивают высоту строки, если их значение превышает эти величины для остального содержимого.
Дальше следуют примеры с пояснениями и подтверждениями того, что это работает. Надеюсь, если не к моим сентенциям, так хотя бы к тексту пера столь известного и авторитетного автора Вы прислушаетесь :)
Из этой цитаты можно сделать 2 важных вывода:
1. Не для всех элементов строчного уровня нельзя задавать ширину. Для незамещаемых - нельзя, разумеется. Для замещаемых (классические картинки, постоянно используемые Мейером в примерах, например; те же самые элементы формы, входящие в набор стандартных, гхм, "графических примитивов ОС" и прочие флэш-апплеты) - как раз-таки можно.
2. Свойство inline-block существует не только в моем мозгу и в "приложении информативного характера", а реально может использоваться и должно поддерживаться браузерами. Что, повторюсь, IE и Opera делают (щас, включу мак, проверю в сафари), а FF - отказыватся.
Теперь Ваши высказывания:
Разумеется, правильно. Но почему же тогда задание ширины для любого input'а работает, причем работает даже в IE5? ;) Проверьте. ([COLOR="Silver"]Правильный ответ: "потому что это замещаемые элементы"[/COLOR]).
А по-моему, Вы просто неправильно или невнимательно прочитали мою фразу. Я же написал inline-block, а не inline!
С нетерпением жду Вашего ответа.
Видимо да. В своей работе лично я привык опираться на нормативные документы + учет того, что не всегда им следует разработчики. Чем руководствуешься ты не очень понятно.
Бог с ним, с инлайном, но Вы почему-то упорно игнорируете описание значения inline-block для свойства display. Я же его не выдумал.
Ну вот теперь и разобрались. Если ты обратил внимание на те ссылки, что я приводил, то должен понимает, что я веду разговор в контексте CSS версии 2. Ты же упорно пытаешь вести диалог и при этом не указываешь, что говоришь о CSS[COLOR="Red"]2.1[/COLOR].
Отсюда и недопонимание.
А по-моему, Вы просто неправильно или невнимательно прочитали мою фразу. Я же написал inline-block, а не inline!
Я очень внимательно прочел. Поэтому и отсылал тебе к спецификации в виду того, что в CSS2.0 inline-block нет.
http://alekciy.ru/test/anchor.php?url=http%253A%252F%252Fdeveloper.mozilla.org%252Fen%252Fdocs%252FCSS%253Adisplay&text=%253Cb%253Einline-block%253C%252Fb%253E%2526nbsp%253B%253A#anchor
http://alekciy.ru/test/anchor.php?url=http%253A%252F%252Fdeveloper.mozilla.org%252Fen%252Fdocs%252FMozilla_CSS_support_chart&text=Mozilla%2520does%2520not%2520support#anchor
Думаю на этом можно считать тему исчерпаной. FF просто не поддерживает данное значение для этого селектора. Изменить/повлиять на это ни как нельзя HTML+CSS средствами.
Ладно, бог с ним, спасибо за поддержку и интересную беседу ;) Тема закрыта :)
Проверено в FF2, IE7, Opera7
---
http://denis909.spb.ru