Попробуйте выровнять диапазон и вход

У меня есть две кнопки, одна из которых реализована как входная, а другая - как промежуток. Они ставятся бок о бок с:Попробуйте выровнять диапазон и вход

{ display:inline-block; }

Кнопки предоставляются с настраиваемой тега и имя класса добавляется динамически в JSP. В css есть определенное определение для тени, для фонового градиента, для заполнения и для шрифта. Они используют некоторый CSS3 как радиус границы.

Но в Firefox высота кнопки пролета 18 при вводе 20. Интересно, что высота их в IE 8 равна 25px, почему?

Теперь мне нужно, чтобы они были одинаковой высоты и выровнены по горизонтали.

Обновление: Теперь у меня есть две кнопки в jsfiddle. Высота использования: 22px; и vertical-align: top; не поможет.

http://jsfiddle.net/gBeCP/

источник

2013-09-09 dunfa

Просьба предоставить код html и css для этих элементов. Создание JSfiddle еще более полезно. –

Отправьте свой код или [jsfiddle] (http://www.jsfiddle.net), если хотите, пожалуйста, прямо сейчас, мы все будем гадать. – Jason

Они отличаются между браузерами, потому что каждый браузер имеет собственную таблицу стилей по умолчанию. Пожалуйста, предоставьте код или jsfiddle, чтобы мы могли вам помочь. –

Попробуйте установить vertical-align:top на input теге. Я рекомендую конкретно устанавливать размеры в px, так как это предотвратит применение браузером настроек по умолчанию.

источник

2013-09-09 18:04:50 beautifulcoder

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

Вы когда-нибудь задумывались над тем, чтобы установить height на элементы, которые вы хотите быть одинаковой высоты?

возможно

span, input[type="button"] { 
    height: 25px; 
}

Или более конкретно, если вам нравится.

источник

2013-09-09 18:43:54 iConnor

думаю есть.

Ответ на этой странице указывает, что FF обрабатывает прокладку по-разному в виде ввода ввода и в пробеле. CSS padding added to height/width for <input type='submit'>

Мое решение состоит в том, чтобы установить минимальную высоту как для ввода, так и для диапазона, а затем использовать вертикальное выравнивание: среднее; чтобы они были выровнены. Наконец, поиграйте вокруг номера прокладки, чтобы текст на кнопках был выровнен.

источник

2013-09-09 21:58:53 dunfa

Самым простым решением является следующие две строки (Vendor-префиксы удалены для краткости):

.tranCoreButton { 
    /* I couldn't be bothered to read through the rest of the CSS, or the 
     in-line CSS; seriously: *minimal* reproductive demo, please... */ 
    display: inline-block; 
    box-sizing: border-box; 
}

JS Fiddle demo.

источник

2013-09-09 22:08:16

Попробуйте выровнять диапазон и вход

ответ

Смежные вопросы