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

Question

Я ввожу кнопку отправки в css для всех браузеров, она отлично работает во всех браузерах, кроме ie7 Когда я нажимаю кнопку «Отправить», она немного перемещается в начало. Это заставляет это выглядеть не в форме. Я использовал определенный CSS для ie.

Вот код, который я использовал:

.button
{
    width   : 80px;
    background  : none;
    cursor  : pointer;
    font-family : 'voltaeftu-regular',Times New Roman;
    font-size   : 16px;
    color   : #fff;
    border  : none;
    margin      : 0px;
    padding     : 0px;
}

Answer 1

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

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

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

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

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

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

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

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

Answer 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, или iPad (с data-platform='iPad'), или на конкретную версию браузера, например:

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

Удачи!

Answer 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>

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