CSS: background image for submit

Я создал кнопку отправки с пользовательским фоновым изображением. Но в разных браузерах он отличается по-разному.CSS: background image for submit

Почти все браузеры показывает, что это правильно:

enter image description here

Но на 2 она имеет дополнительный рост:

enter image description here

Можно ли указать, что неправильно с моей разметке?

CSS:

input[type="submit"]{ 
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat; 
    width:30px; 
    height:30px; 
    border:none; 
    float:left; 
    margin:30px 0 0; 
    cursor:pointer; 
}

HTML:

<form> 
    <input type="text" class="placeholder" value="Search" /> 
    <input type="submit" value="" /> 
</form>

Испытано:

IE 8,0 хорошо
IE 7,0 хороший
iPhone хороший
Chrome 24,0 хороший
Firefox 18.0.2 хорошо
Safari 5.1 (Mac OS X 10.7.1) хорошо
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bi т) дополнительная высота
Opera 11,51 (Mac OS X 10.7.1) Дополнительная высота

Live demo on jsfiddle.

источник

2013-02-18 Arthur Halma

В Opera 12.14, Windows XP, он отлично работает. –

Кнопка отправки - правильный размер. Это неправильное поле ввода. Единственное, что я могу придумать, - это, возможно, нужно установить 'line-height' и/или' font-size'. Используйте инструменты разработчика, чтобы узнать, можете ли вы найти какие-либо конкретные правила таблицы стилей браузера, которые могут быть установлены, что вы не особо переопределяете. – crush

Возможно, вам также придется явно указывать такие вещи, как 'padding: 0;', чтобы убедиться, что значения по умолчанию для браузера полностью не соответствуют действительности. Также стоит посмотреть, будет ли 'normalize.css', просто придерживайтесь этого перед всеми вашими пользовательскими стилями. – Seer

Попробуйте это. Это придаст элементу высоту фиксации.

input[type="text"]{ 
    margin:30px 0 0; 
    width:226px; 
    color:#999999; 
    font-size:12px; 
    font-style:italic; 
    border:1px solid #cccccc; 
    border-right:none; 
    background-color:#ededed; 
    float:left; 
    height:28px; 
    padding-right: 7px; 
    padding-left: 7px; 
    line-height: 28px; 
}

источник

2013-02-18 13:23:19 jjj

Похоже, что высота текстового поля отличается от кнопки отправки. Попробуйте установить высоту текстового поля.

источник

2013-02-18 13:22:33 DannyBoy

Это именно то, что проблема. Кнопка отправки согласована в обоих изображениях, но текстовое поле отсутствует. Стиль текстового поля. – crush

Спасибо. Вы были правы. –

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

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

{font-style:normal}

источник

2013-02-18 14:44:02 THeBAckwardss

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

margin:0; 
padding: 0; 
border: none; 
outline: none;

источник

2014-05-21 01:52:21

CSS: background image for submit

ответ

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