Итак, я использую display: table-cell
, чтобы поместить две кнопки рядом друг с другом, чтобы, если текст от одного переполнения до следующей строки, обе кнопки имеют одинаковую высоту. У меня есть border-collapse: separate
, и я использую border-spacing
, чтобы поместить пространство между ними. Он отлично работает, если я использую что-то вроде <div class="button">
, но как только я использую элемент <button>
, среднее пространство исчезает.
JSFiddle: http://jsfiddle.net/uASbb/
Теперь, используя <div>
, теперь отлично (если не семантически точно), так что мне в основном просто интересно, если кто-то знает, что именно происходит здесь.
Примечание. Я также заметил некоторое (другое) странное поведение с использованием элементов <input>
в этой же ситуации: http://jsfiddle.net/G5SFX/1/
Является ли display: table-cell
просто не поддерживаться в этих случаях? Это ошибка?
Спасибо!
EDIT: похоже, вы просто не можете применить кнопку display: table-cell
к кнопке; он по умолчанию возвращает значение inline-block
. Смотрите этот скриншот от Chrome WebInspector:
Теперь остаются вопросы: является ли это преднамеренным? Это спецификация или это только браузер? Можем ли мы изменить его?