Есть ли решение для дополнительного заполнения, добавленного в IE 7/8 для типа ввода = submit, когда используется фоновое изображение + другие странности IE 7/8? - PullRequest
Новая
       10

Есть ли решение для дополнительного заполнения, добавленного в IE 7/8 для типа ввода = submit, когда используется фоновое изображение + другие странности IE 7/8?

0 голосов
/ 03 февраля 2011

Я пытался выяснить, где я получаю это дополнительное пространство между границей и фоновым изображением на моем входе [type = submit] в IE 7/8.Кажется, если я заменю фон на фактическое изображение вместо того, чтобы просто использовать цвет, IE добавляет это дополнительное пространство?

Еще одна странность, которую я обнаружил, заключается в том, что если вы нажмете на один из текстовых вводов в форме, ондобавляет 1px черный "контур" вокруг кнопки отправки.

У меня настроена демонстрационная страница - http://bit.ly/i3XC1y

Ответы [ 2 ]

5 голосов
/ 31 января 2012

Вот простое решение вашей проблемы.Просто добавьте строку sinlge к вашему классу, и все готово. Здесь мы находим решение: 

.submit-btn{ overflow:visible }

Посетите http://blog.10pixel.com/input-button-extra-width-in-ie-7-fix/ для получения более подробной информации.

1 голос
/ 03 февраля 2011

Я работал над этим еще немного, и лучшее решение, которое я нашел, которое, кажется, делает ввод очень похожим в следующих браузерах: IE6 - IE8, FF3.5 и FF3.6, Chrome, Opera и Safari - оберните мои данные с помощью div.

Ниже приведена разметка, которую я использовал.

HTML 

<form method="get" action="">
    <input name="text1" type="text" class="text-input" />
    <input name="text2" type="text" class="text-input"/>
    <div class="submit-btn"><input type="submit" name="submit" value="Submit" class="submit-input-wrapped" /></div>
</form>

CSS 

div.submit-btn{
    border:1px solid #000;
    width:70px;
}

div.submit-btn .submit-input-wrapped{
    background:url(big-btn.jpg);
    border:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    height:30px;
    line-height:30px;
    margin:0px;
    padding:0px;
    text-indent:0px;
    width:70px;
}

div.submit-btn .submit-input-wrapped:hover{
    background-position:0px -23px;
}

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

Одной маленькой вещью, которую я заметил, было горизонтальное выравнивание текста. По умолчанию кажется, что ввод ввода центрирует текст значения, но я заметил некоторые расхождения между FF и другими браузерами. Это не очень заметно, но если вы установите выравнивание текста по левому краю на вводе ввода, вы заметите, что между левой границей и текстом значения в FF есть небольшой отступ. Во всех других браузерах текст значения совпадает с левой границей, когда значение выравнивания текста установлено влево.

...