Удалите полный стиль кнопки HTML/отправьте

Ответ 1

Да, я боюсь, что это неизбежная проблема с кнопками стилизации, что IE (и Opera) будет перемещать содержимое кнопки вниз и вправо на один пиксель при нажатии.

Здесь у вас есть несколько возможных подходов:

• Используйте <button> с <span> внутри него вместо <input type="button">. Установите кнопку relative и диапазон absolute на top/left 0, так что перемещение содержимого кнопки не влияет на диапазон. Ужасно, и он будет разбит на другие браузеры, поэтому вы хотите, чтобы этот стиль применялся для IE и, возможно, Opera.

• Используйте ссылку, обозначенную как кнопка вместо фактической кнопки, с script, примененным к ее событию click. В отличие от кнопок, вы получаете полный контроль над последовательным стилем для ссылок. Я бы посоветовал это сделать, поскольку вы перетаскиваете нагрузку на поведение ссылок, которые не имеют смысла для кнопки, например, щелчок по центру, щелчок правой кнопкой мыши, перетаскивание и т.д. Многие люди используют ссылки делать кнопочные задачи, но IMO это крайне нежелательно. (Особенно, когда они используют ссылки javascript:... ghastly.)

• Используйте неактивный элемент, например <span> вместо фактической кнопки, с script, примененным к его событию click. Опять же, вы получаете полный контроль над стилем. Это то, что SO использует для таких действий, как "добавить комментарий". Проблема в том, что вы нарушаете навигацию по клавиатуре; вы не можете использовать вкладку, пробел и т.д. для навигации и активации элементов управления. Вы можете включить навигацию на клавиатуре в большинстве браузеров, указав атрибут a tabindex, но помещать tabindex в неактивный элемент является недопустимым HTML. Вы также можете записать его из script, а также добавить script, чтобы разрешить пробел или вернуться, чтобы активировать кнопку faux. Но вы никогда не сможете полностью воспроизвести поведение поля формы браузера.

• Замените все это на <input type="image">. Естественно, вы получаете пиксельный контроль над изображением! Но, пытаясь сопоставить стили рендеринга и генерировать новое изображение для каждой кнопки, обычно слишком большая боль в шее.

В вариантах 2 и 3 также возникает проблема, заключающаяся в том, что они вносят зависимость от JavaScript, поэтому ваша форма будет ломаться, когда JS недоступен. Вы можете уменьшить это, используя обычную <button> в разметке и заменяя ее другими элементами управления из script, или если вы создаете их из script, в любом случае не проблема. Но, в конце концов, мой обычный вывод заключается в том, что это слишком много усилий и слишком хрупкий результат, и что лучше всего путать вариант 0:

• Живи с ним. Обычно это не так уж плохо, что содержимое кнопки немного движется, когда вы нажимаете на нее.

Ответ 2

Это тоже долгое время меня беспокоило, но я нашел достойное решение.

Сначала вам понадобится какой-то способ ориентации на определенный браузер в вашем CSS. Вы можете использовать Modernizr или мой личный фаворит этот сладкий маленький фрагмент из http://rog.ie/post/9089341529/html5boilerplatejs

<script>
var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
</script>

Затем в вашем документе HTML внутри вашей кнопки добавьте тег <span>, который содержит содержимое кнопки. Создайте его, чтобы выглядеть хорошо в дружественных браузерах, затем добавьте этот бит кода в стили кнопки :active в вашем CSS:

html[data-useragent*='Opera']

Вы можете заменить Opera на любое имя браузера, а затем пометить span по своему вкусу.

Он может выглядеть примерно так:

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

Это немного взломанный и, вероятно, слишком большой для такой незначительной проблемы, но он работает. Лучше всего, у вас есть точный контроль над всем. Вы можете настроить таргетинг только на компьютеры Windows или iPads (с помощью data-platform='iPad') или на определенную версию браузера, например:

html[data-useragent*='Chrome/13.0']

Удачи!

Ответ 3

Я не знаю, если это проблема, но вы также можете попробовать установить активное состояние:

.button, .button:active{
...
}

EDIT: Использовал следующий мини-образец в IE7 и не мог видеть перемещение кнопки:

<html>
<head>
<style type="text/css">
.button
{
width   : 80px;
background  : none;
cursor  : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size   : 16px;
color   : #fff;
border  : 1px solid #0f0;
margin      : 0px;
padding     : 0px;
}
</style>
</head>
<body style="background:#f00;">
    <input class="button" type="submit"/>
</body>
</html>

Просто установите границу, чтобы увидеть окружение кнопки. Код работает для меня.