Удалите полное моделирование HTML, снабжают кнопками/отправляют

Question

Удалите полное моделирование HTML, снабжают кнопками/отправляют

Я разрабатываю кнопку отправки в CSS для всего браузера ее работа, прекрасная во всем браузере кроме ie7, Когда я нажимаю на кнопку отправки, это перемещается в вершину немного. Это заставляет его выглядеть не в форме. Я использовал определенную CSS для т.е.

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

.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;
}

21

html css

задан Fuzzical Logic 11 June 2012 в 05:48

2 ответа

Другие вопросы по тегам:

html css

Похожие вопросы:

score 2 · Answer 1

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

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

РЕДАКТИРОВАТЬ: Использовал следующий мини-пример в 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>

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

score 18 · Answer 2

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

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

Используйте
Используйте ссылку, стилизованную под кнопку, вместо настоящей кнопки, со скриптом, применяемым к событию click. В отличие от кнопок, вы получаете полный контроль над последовательной стилизацией ссылок. Я бы не советовал этого делать, так как в этом случае вы притянете за уши множество поведений ссылки, которые не имеют смысла для кнопки, например, средний клик, правый клик-закладка, перетаскивание и т. д. Многие люди используют ссылки для выполнения задач кнопок, но IMO это крайне нежелательно. (Особенно когда они используют javascript: ссылки... ужасно.)
Используйте неактивный элемент, такой как вместо настоящей кнопки, со сценарием, применяемым к его click событию. Опять же, вы получаете полный контроль над стилем. Именно это используется в SO для таких действий, как "добавить комментарий". Проблема в том, что вы нарушаете клавиатурную навигацию; вы не можете использовать табуляцию, пробел и т.д. для перемещения и активации элементов управления. Вы можете включить клавиатурную навигацию в большинстве браузеров, задав элементу атрибут tabindex, но размещение tabindex на неактивном элементе является недопустимым HTML. В качестве альтернативы вы можете написать его из сценария, а также добавить сценарий, разрешающий пробел или возврат для активации фальшивой кнопки. Но вы никогда не полностью воспроизведете поведение поля формы браузера в совершенстве.
Замените все это на . Естественно, вы получаете пиксельно-совершенный контроль над изображением! Но попытки согласовать стили рендеринга и генерирование нового изображения для каждой кнопки обычно слишком мучительны.

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