Изменение высоты кнопки резко меняет стиль кнопки

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

Я работаю над системой, разработанной кем-то другим (многие из предыдущих разработчиков по всей компании и различными уровнями качества в коде), где пользователи могут создавать «панели мониторинга» для своих сохраненных данных с различными элементами (изображения, графики, таблицы, текстовые выходы и т. д.), используя интерфейс WYSIWYG GUI.

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

Вот код ниже и ссылка на очень простой скрипт JS, показывающий его выполнение. Кажется, вторая кнопка теперь имеет градиент цвета, не закругленные края и более четкую границу. Я удалил функциональный код, просто оставив его в коде стиля.

<button style="width: 186px; font-family: Arial; font-size: 10pt; color: Black;"> 
    Perform Action 
</button> 

<button style="width: 186px; height: 124px; font-family: Arial; font-size: 10pt; color: Black;"> 
    Perform Action 
</button>

http://jsfiddle.net/r3sct7b5/1/

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

Редактировать для ясности - это то, что я вижу в своем приложении, и JSFiddle. Кнопка слева - та, которая имеет немодифицированную высоту, справа - кнопка с измененной высотой.

enter image description here

источник

2015-02-25 FrustratedCoder

Что значит «драматично» В этом нет драмы. Вы увеличили высоту, а в jsFiddle увеличилась только высота, ничего больше не произошло. Поскольку вы не увеличивали шрифт, пустое пространство заполняется дополнением. – AtanuCSE

Эй, я добавил скриншот, чтобы лучше передать «драму», которую у меня есть. – FrustratedCoder

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

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

Границы одинаковы на обеих кнопках.

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

источник

2015-02-25 04:42:04 sgoblin

Спасибо за ответ! Я думаю, что это то, что я должен сделать - это хорошо. Я просто надеялся, что не должен этого делать, для глупой черты низкого уровня. Идентификация скорее посвятила мое время другим вещам. Я просто немного смущен, как добавление другого имущества вызывает это горе.Я могу изменить ширину без проблем, но высота заставляет смеяться. – FrustratedCoder

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

EDIT: Глядя на ваш скриншот, это не то, что я вижу. Какой браузер вы используете?

источник

2015-02-25 04:54:58

Использование Chrome (обновленная версия 40.0.2214.115 (64-разрядная версия)) в OSX. – FrustratedCoder

Изменение высоты кнопки резко меняет стиль кнопки

ответ

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