Eliminar el diseño completo de un botón HTML/enviar

Estoy diseñando un botón de envío en CSS para todos los navegadores funciona bien en todos los navegadores excepto ie7 Cuando hago clic en el botón enviar, se mueve un poco hacia arriba. Lo hace parecer fuera de forma. Utilicé un CSS específico para, por ejemplo.Eliminar el diseño completo de un botón HTML/enviar

Este es el código que he utilizado:

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

Fuente

2010-06-24 Mayur

no sé si ese es el problema, pero se podría tratar de establecer el estado activo también:

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

EDIT: usaron los siguientes mini-muestra en IE7 y no puede ver el botón de movimiento:

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

Sólo tienes que configurar un bo para ver el entorno del botón. El código está funcionando para mí.

Fuente

2010-06-24 13:58:42 Marks

marcas HI lo he probado también, pero no funciona, ¿hay alguna manera de solucionar este problema? – Mayur

Puede probar uno de los restablecimientos css y ver si el problema persiste. Pero en un vistazo rápido a un restablecimiento de css, no vi nada establecido para el botón que podría causar esto. – Marks

Sí, me temo que es un problema inevitable con los botones de diseño que IE (y Opera) muevan el contenido del botón hacia abajo y hacia la derecha un píxel cuando se hace clic.

Tienes un montón de posibles enfoques aquí:

Utilice un <button> con un <span> su interior en lugar de una <input type="button">. Coloque el botón relative y el tramo absolute en top/left0, de modo que el movimiento del contenido del botón no afecte el tramo. Feo, y se romperá en otros navegadores, por lo que solo querrás que este estilo se aplique para IE-y-tal vez-Opera.
Utilice un enlace diseñado como un botón en lugar de un botón real, con una secuencia de comandos aplicada a su evento click. A diferencia de los botones, obtienes un control total sobre el estilo consistente para los enlaces. Aconsejaría esto en contra de esto ya que está arrastrando una carga de comportamientos de enlace que no tienen sentido para un botón, como hacer clic con el botón central, hacer clic con el botón derecho en un marcador, arrastrar y soltar, etc. Mucha gente usa enlaces para hacer tareas de botón pero IMO es altamente indeseable. (Sobre todo cuando se utilizan javascript: enlaces ... fantasmales.)
utilizar un elemento inactivo tal como <span> en lugar de un botón real, con guión aplicado a su caso click. Nuevamente, obtiene un control de estilo completo. Esto es lo que SO usa para acciones como 'agregar comentario'. El problema es que rompes la navegación del teclado; no puede usar la pestaña, el espacio, etc. para navegar y activar los controles. Puede habilitar la navegación por teclado en la mayoría de los navegadores dando al elemento un atributo tabindex, pero poner tabindex en un elemento inactivo es HTML no válido. Alternativamente, puede escribirlo desde el script, y también agregar script para permitir el espacio o regresar para activar el botón falso. Pero nunca bastante reproducen el comportamiento del campo del formulario del navegador a la perfección.
Reemplazar todo con un <input type="image">. ¡Naturalmente obtienes un control perfecto sobre la imagen! Pero tratar de unir los estilos de representación y generar una nueva imagen para cada botón suele ser demasiado doloroso.

Las opciones 2 y 3 también tienen el problema de que introducen una dependencia de JavaScript, por lo que su formulario se romperá cuando JS no esté disponible.Puede mitigar eso usando un <button> normal en el marcado y reemplazándolo con otros controles del script, o si los está creando desde un script de todos modos no hay problema. Pero al final, mi conclusión habitual es que todo esto es demasiado esfuerzo y demasiado frágil, y que lo mejor es engordar para la opción 0:

En vivo con ella. Por lo general, no es tan malo que el contenido de los botones se mueva un poco cuando lo haces clic.

Fuente

2010-06-24 15:12:59 bobince

Esto me molestó durante mucho tiempo también, pero he encontrado una solución decente.

Primero, necesitará alguna forma de orientar un navegador específico en su CSS. Se podría utilizar Modernizr, o mi favorito personal, este pequeño fragmento de dulce de http://rog.ie/post/9089341529/html5boilerplatejs

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

A continuación, en el documento HTML, dentro de su botón, añadir una etiqueta <span> que mantiene el contenido del botón. Estilo que se vea bien en los navegadores amigables, a continuación, agregar este fragmento de código para :active estilos del botón en tu CSS:

html[data-useragent*='Opera']

Puede reemplazar Opera con cualquier nombre del navegador, a continuación, el estilo de la span a su gusto.

Puede ser algo como esto:

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

Es un poco hacky, y algo excesivo para un problema tan menor, pero funciona. Lo mejor de todo es que tienes un control preciso sobre todo. Incluso puede apuntar sólo las máquinas de Windows, o iPads (con data-platform='iPad'), o una versión específica de un navegador, de esta manera:

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

Buena suerte!

Fuente

2012-06-10 17:36:20

esto debería recibir más votos favorables – Forza

Eliminar el diseño completo de un botón HTML/enviar

Respuesta

Cuestiones relacionadas