2010-02-02 21 views
9

Estoy trabajando en una forma grande y contiene muchos botones en todo el formulario, por lo tanto, estoy tratando de obtener entrada de trabajo [type = "button" ] en mi archivo css principal para que atrape todos los botones sin tener que agregar una clase a cada uno, por alguna razón esto no funciona en IE7, después de verificar en la web dice que IE7 debería soportar esto.Css selector de atributos para tipo de entrada = "botón" no funciona en IE7

También tiene que ser type = "button" y no type = "submit" ya que no todos los botones enviarán el formulario.

¿Alguien podría darme una pista de lo que estoy haciendo mal?

input[type="button"] { 
    text-align:center; 
} 

también he intentado input[type=button]

+0

Esto puede estar relacionado: http://stackoverflow.com/questions/2112783/attribute-selectors-javascript-and-ie8 –

+0

He escrito [un artículo] (http://sarfraznawaz.wordpress.com/2010/ 02/22/css-attribute-selector /) con información detallada sobre los selectores de atributos CSS. – Sarfraz

Respuesta

25

Me costaba conseguir input[type=button] selectores trabajando en IE7 o IE8. El problema resultó ser que a las páginas HTML les faltaba una declaración "! DOCTYPE". Una vez que agregué

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Luego todo funcionó bien. Obviamente, puede utilizar una declaración diferente "! DOCTYPE" para satisfacer sus requisitos.

+0

he notado que un .ASPx! DOCTYPE es el siguiente: ¿dónde agregarías la parte html que sugieres? ¿Debo reemplazar el XHTML 1.0 con él? –

+0

Supuse que tener cualquier tipo de 'DOCTYPE' definido llevaría a los selectores a trabajar. ¿No están trabajando para usted con el tipo de documento que enumera arriba? – ipr101

+0

no funciona, pero pensándolo bien lo he comprobado solo en Google Chrome. (Tal vez es específico del navegador) –

1

selectores de atributo son, por desgracia, aún no están bien implementados en todos los principales navegadores, ya que es CSS3 y no 2.1, el estándar actual. Debido a que los muchachos de W3C no son tan rápidos en la toma de decisiones, es mejor que no esperes demasiado, porque no podremos usar css3 en el corto plazo. Algunos aspectos de esto ya están implementados, pero este no es (seguramente no en IE6).

Así que, como ya dijiste, sería mucho mejor proporcionar todas tus entradas con una clase, y hacerlo un hábito para hacerlo cada vez que crees un formulario. Siempre es útil y no requiere mucho trabajo cuando ya está programando el formulario.

Cuando creo una forma, siempre agrego el tipo de una entrada como una clase, por ejemplo:

especialmente las dos últimas será muy útil en muchos casos, porque no tenga que pegar el estilo al botón .y enviar de forma separada, pero puede consultar si desea hacerlo.

+0

+1. Puede valer la pena señalar que si el OP no quiere agregar clases, puede hacer algo como esto con javascript o un marco de js como jQuery. :) – munch

+0

Los selectores de atributos son CSS 2, no 3, y han sido una 'Recomendación' completa de W3 durante mucho tiempo. (¡Incluso los selectores de CSS3 son una "recomendación propuesta", que está bastante avanzada y bien implementada fuera del mundo de IE!) – bobince

+0

Muy bien, mi error, pero aún no cambia el hecho de que todavía no está bien implementado, porque el 'mundo de IE' como lo llamas, sigue siendo un gran mundo para tratar hoy en día. –

1

Funcionan para mí en IE7 (ambas formas, con y sin comillas).

Quizás haya otro selector que enmascare el suyo. Se podría intentar hacer su selector más específico con el fin de darle una mayor prioridad, por ejemplo .:

body form input[type="button"] { 
background: red; 
} 
8
input[type="button"]{ text-align:center; } 

¿Qué espera que para hacer? El texto en un <input type="button"> ya está centrado por defecto.

Si desea alinear el botón en el elemento primario, debe establecer text-align en el elemento primario, no en el botón.

Los selectores de atributos, con o sin comillas, funcionan en IE7. Es IE6 ese es el navegador de problemas allí.

3

No he tenido problemas para obtener declaraciones css como las que funcionan en IE7; IE6 siempre es el problema, pero creo que este CSS también funcionará allí. Entonces, no creo que IE7 sea el problema.

Lo primero es que su muestra de CSS solo afectará a los botones, no afectará los botones de envío. Pero esa es una solución fácil; cambiar el CSS a:

input[type="submit"], input[Type="button"] 
{ text-align: center; } 

En segundo lugar, como ha dicho Manolo Santos, podría tener otra declaración CSS que está controlando el sistema de text-align? ¿Una configuración en solo elementos de entrada?Probablemente valga la pena usar una herramienta de desarrollador como Firebug o los componentes de desarrollador integrados en Chrome o IE8 para ayudar a encontrar el problema de CSS.

0

Esta pregunta es viejo, pero si alguien tiene un problema relacionado .. Me pasar unos minutos tratando de resolver un problema similar

entrada [type = "Enviar"] no funciona en Internet Explorer 7 (a pesar de la IE asignando el estilo correctamente a la entrada como vi en las herramientas de desarrollo).

SOLUCIÓN: Cambié de Enviar a ¡envíe y funcionó!

He publicado esto aquí porque puede ayudar a alguien cuando se depura.

0

Por alguna razón, hay momentos en los que los selectores de atributos no se aplicarán antes de que la página se muestre en IE7. Esto realmente me pasó a mí. Mi selector era table[bgColor="#c0c0c0"] y no se aplicaría en la carga de la página. Como estaba usando IE9 (Modo de navegador: IE7, Modo de documento: Estándares de IE7), pude usar F12 Developer Tools para mirar mi archivo CSS. Desmarqué el selector y luego lo revisé nuevamente. Los atributos aplicados después de eso. Esto es reproducible exactamente en el buen IE7, así que tendré que encontrar una solución alternativa. (Nota: Ni usar citas simples, dobles o sin comillas, ni hacer variaciones en las mayúsculas causan impacto aquí)

1

Estoy bastante seguro de que todos saben que la solución de agregar un! DockType al encabezado no es ' una posibilidad todo el tiempo.

Por ejemplo, desarrollo en el entorno DotNetNuke (DNN) que el desarrollador no tiene acceso al encabezado. ¡Entonces es casi imposible agregar! DocType.

En este caso, no tiene demasiada opción, excepto relacionar un CssClass con el botón y referirse a él, explícitamente, en el módulo CSS.

Cuestiones relacionadas