Display: table-cell, border-spacing не работают с кнопками?

Итак, я использую 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:
table-cell -> inline-block

Теперь остаются вопросы: является ли это преднамеренным? Это спецификация или это только браузер? Можем ли мы изменить его?

Ответы

Ответ 1

Вставка элемента button в div является хорошим решением (на вашем месте я бы тоже выбрал его), но если вы хотите отображать элементы button бок о бок с пространством между ними без помощь от div, вы можете попробовать это для своего класса .item:

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Width сводится к 46%, чтобы a margin of 1% вокруг каждого элемента button. Теперь у вас есть пространство между ними, а также если вы измените размер окна, второй элемент button не попадет под первую.

Пример: http://jsfiddle.net/codenighter/H7TZU/

Надеюсь, что это поможет.

EDIT: Кажется, что border-spacing (на самом деле ни один из block стиль не работает) не работает с button или input. Но он работает с другими встроенными элементами, такими как span, h1 или b. Таким образом, для input и button свойство display: table-cell не может быть правильно применено (я изменил значение Width для button и input, и он показал, а для span и b Width остался фактически на 50%).

Примеры: http://jsfiddle.net/codenighter/HrTZS/