Растягивание кнопок в IE

    Как-то всегда обходил эту проблему стороной, а теперь надоело. Суть в том что при большом размере кнопки IE растягивает свой «батон» превращая его в какое-то страшнейшее убожество:



    Особенно обратите внимание на прелестные артефакты прозрачности по углам.

    Какие есть выходы из этой ситуации?

    Сразу оговорюсь какое поведение я бы ожидал увидеть:



    Поискал решения в инете, но из вариантов предлагается либо замена кнопки или ее частей картинками (но я хочу чтобы интерфейс подстраивался под стиль браузера и системы!) или просто, используя 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;
    }


    Все способы дают только частичное решение проблемы (после определенной длины кнопка снова начинвает «уплывать»), но вполне дают возможность уместить на кнопке разумное количество символов.

    Спасибо за помощь!
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 43

      –2
      А что вам мешает заменять кнопку картинкой только в эксплорере?
        –2
        Помоему не зависимо от стиля системы кнопки будут в эксплорере отди и теже.
          +3
          Кнопки меняются вместе с темой windows, проверил попереключав темы (оливковая, серебряная, классическая)
          +1
          Да в принципе ничего не мешает, кроме желания все сделать без костылей... Поэтому и спрашиваю, может есть более адекватный вариант? (хотя конечно понимаю что "адекватный" и "ие" это понятия вообще редко совместимые)
            0
            Мне кажется что других вариантов нет. Так что либо забить, либо костыли! :-)
              0
              вообще конечно самый адекватный вариант — это оставить всё как есть. Ибо кновпи и в африке должны оставаться привычными пользователю кнопками. :-) ну это так, ИМХО
                0
                У меня рука не поднимется оставить так как есть
                  0
                  Знаете, баг есть баг и нечего лечить умершего. Я это к тому, что нечего пытаться делать работу за разработчиков ИЕ. Лучше всем отправить в MS 100 000 писем с требованием исправить баг, чем ломать себе голову.
                  Второй довод: пользователь IE по умолчанию не ищет эстетики, простоты, безопасности, удобства и т.п. Выход оставить как есть!
            0
            Обнуляйте дефолтные значения HTML-элементов

            http://www.webmakerslounge.com/css/reset…
            http://www.webmakerslounge.com/css/css-r…
              0
              Или я неправильно понял суть вопроса?
                0
                Незнаю как вы поняли, но это не помогло
                  0
                  Извиняюсь, не помогло
                    +1
                    Понял. Вам сюда.
                      +1
                      А вобще конечно, строго говоря, это тоже не решение, так, workaround.
                        +1
                        И да, перенесите в Веб-разработку или в Каскадные Таблицы Стилей
                  0
                  input type=submit
                    0
                    Тьфу, совсем зарапортовался.
                    +1
                    попробуйте прописать такой стиль для инпута:

                    input {
                    padding: 0 5px;
                    width: 100px;
                    overflow: visible;
                    }

                    Прописать только для IE (в условных комментариях)
                      +1
                      Когда-то нагуглил без особых проблем.
                      .long_button {
                      width: auto;
                      overflow: visible;
                      padding:0 .6em 0 .6em;
                      }
                        0
                        Всем ответившим спасибо, кармы, и всяческих благ!
                          +1
                          Я, например, писал об этом довольно давно, в начале 2007: Ширина кнопок в Internet Explorer.
                            0
                            Warning: mktime() [function.mktime]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Europe/Helsinki' for 'EEST/3.0/DST' instead in /usr/home/sudoku/public_html/rus/blog/wp-includes/functions.php on line 24 – это видимо дань возрасту статьи?
                              0
                              Спасибо, исправил
                            –2
                            как в мультике было: крылья-крылья, ноги!
                            так и тут можно: input-input, button!
                            по-моему гораздо удобнее
                              0
                              Раз уж разговор о сабмитах, я тоже пожалуюсь: мне так и не удалось убить в IE отступ сверху в конструкции вида <span><input type=submit></input><span></span></span>.
                              Т.е. вложенный спан прилегает к верхнему краю родительского, а у инпута сверху отступ несколько пикселов. И нагуглить ничего про это как-то не удалось. Кто подскажет?
                                0
                                Посмотрите в сторону niceforms ;)
                                –1
                                Microsoft тоже не знал, как решить эту проблему. Поэтому они создали Silvelight. Пользуйтесь. :)
                                  0
                                  Интересно, а в IE 8 это проблема осталась?
                                    0
                                    "придыдущему" => "предидущему"
                                      0
                                      :D аватарку давно рисовали?
                                        0
                                        Упс, действительно схожи. Давненько... даже не помню когда... нужно будет что-нибудь посвежее придумать... :)
                                        0
                                        а почему не сразу "предыдущему" (это же не приставки "сверх-" и "роз-", где "и" на "ы" не заменяется)
                                        0
                                        "width: 0; /* for IE only */"

                                        Есть старинный IE-only хак — подчёркивание в начале свойства:
                                        _width:0
                                        • UFO just landed and posted this here
                                            0
                                            Есть хак *width: 0 — катит и для IE7, насколько я проверял
                                          0
                                          Хм... Не стыкался с такой проблемой. Все что мне требовалось от кнопки задавал стилями и не испытывал никаких трудностей.
                                            0
                                            IE стимулирует придумывать короткие подписи к кнопкам ;)
                                              0
                                              Spasibo pomoglo daje na rabote! :)
                                                0
                                                Достаточно просто
                                                overflow: visible;

                                                работает для мозиллы, ie6, ie8, ie7, опера, хром, сафари.
                                                  0
                                                  Фига вы проснулись, не прошло и года. Еще бы месяц — и прошло, ага
                                                  0
                                                  просто именно сейчас пондобились кнопки сверстать. наткнулся на проблему, пустил поиск и нашёл (-:

                                                  но я так и не понял, отчего если поставишь overflow:visible, всё пашет. фокус какой-то ((-:
                                                    0
                                                    Вся работа IE — большой фокус

                                                  Only users with full accounts can post comments. Log in, please.