Как-то всегда обходил эту проблему стороной, а теперь надоело. Суть в том что при большом размере кнопки IE растягивает свой «батон» превращая его в какое-то страшнейшее убожество:
Особенно обратите внимание на прелестные артефакты прозрачности по углам.
Какие есть выходы из этой ситуации?
Сразу оговорюсь какое поведение я бы ожидал увидеть:
Поискал решения в инете, но из вариантов предлагается либо замена кнопки или ее частей картинками (но я хочу чтобы интерфейс подстраивался под стиль браузера и системы!) или просто, используя CSS, превращение кнопки во что-то похожее на прямоугольник с текстом… Ведь в ie, как только меняешь стиль кнопки хоть немного она сразу теряет стиль оформления системы.
Сделал страничку, где можно наглядно увидеть зависимость уродства от размера кнопки (в ИЕ).
Надеюсь на адекватность хабрасообщества. Неужели осел настолько упрям?
Update:
Все таки можно! Спасибо CurlyBrace,kostos и telega2 за помощь в решении вопроса!
Решения:
1) Статья The stretched buttons problem in IE с подробным разбором проблемы и следующим решением:
2) Вариант:
Дает возможность уместить больше текста на кнопке за счет сокращения длинны (мое «Сохранить и продолжить» влезло, хотя еще пару букв и кнопка снова «плывет»)
3) Вариант с отдельным классом, в принципе аналогичен предыдущему, но зато можно использовать только по необходимости, а не затрагивая все инпуты страницы
Все способы дают только частичное решение проблемы (после определенной длины кнопка снова начинвает «уплывать»), но вполне дают возможность уместить на кнопке разумное количество символов.
Спасибо за помощь!
Особенно обратите внимание на прелестные артефакты прозрачности по углам.
Какие есть выходы из этой ситуации?
Сразу оговорюсь какое поведение я бы ожидал увидеть:
Поискал решения в инете, но из вариантов предлагается либо замена кнопки или ее частей картинками (но я хочу чтобы интерфейс подстраивался под стиль браузера и системы!) или просто, используя CSS, превращение кнопки во что-то похожее на прямоугольник с текстом… Ведь в ie, как только меняешь стиль кнопки хоть немного она сразу теряет стиль оформления системы.
Сделал страничку, где можно наглядно увидеть зависимость уродства от размера кнопки (в ИЕ).
Надеюсь на адекватность хабрасообщества. Неужели осел настолько упрям?
Update:
Все таки можно! Спасибо CurlyBrace,kostos и telega2 за помощь в решении вопроса!
Решения:
1) Статья The stretched buttons problem in IE с подробным разбором проблемы и следующим решением:
/* IE stretched button bug workaround */
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
2) Вариант:
input {
padding: 0 5px;
width: auto;
overflow: visible;
}
Дает возможность уместить больше текста на кнопке за счет сокращения длинны (мое «Сохранить и продолжить» влезло, хотя еще пару букв и кнопка снова «плывет»)
3) Вариант с отдельным классом, в принципе аналогичен предыдущему, но зато можно использовать только по необходимости, а не затрагивая все инпуты страницы
.long_button {
width: auto;
overflow: visible;
padding:0 .6em 0 .6em;
}
Все способы дают только частичное решение проблемы (после определенной длины кнопка снова начинвает «уплывать»), но вполне дают возможность уместить на кнопке разумное количество символов.
Спасибо за помощь!
