cómo hacer que textarea tenga el mismo ancho en IE y Firefox?

Question

Quiero tener un área de texto que sea 500px, este es el CSS que uso para el área de texto:

ancho: 498px; relleno: 0px; margen: 0px;

Me di cuenta de que IE y Chrome tienen un borde de 1px por defecto, por otro lado FF tiene un borde de 2px que da como resultado que el área de texto sea 502px en lugar de 500px, ¿alguna solución alternativa?

Solo una nota, podría especificar explícitamente el ancho del borde de texarea, es decir. border-width: 1px, pero el problema aquí es que no funciona bien con IE (el borde predeterminado de textarea en IE no se ve bien cuando el borde está establecido en 1px), podría cambiar el color del borde, pero No quiero hacer esto, prefiero mantener los estilos predeterminados de los navegadores, solo quiero que el ancho sea el mismo en todos los navegadores sin cambiar los estilos predeterminados ni establecer un color en el borde, ¿es esto posible?

Answer 1

Puede configurar todos los estilos predeterminados de sus navegadores para que sean los mismos utilizando una hoja de restauración de CSS en la parte superior de su documento. Me gusta el YUI reset CSS. Eso debería establecer los estilos de base para todos los controles para que sean los mismos en todos los navegadores, y eso debería permitir un diseño más predecible.

IMO si permite que cada navegador tenga su propio estilo (que incluso puede personalizar el usuario), está en el camino de tener un estilo impredecible para su aplicación, con problemas apareciendo en lugares que nunca pensó lo harían. Es mejor utilizar un restablecimiento de CSS y luego diseñar sus aplicaciones en consecuencia. Si visitas el sitio de yahoo (referenciado), también tendrán su propio CSS "base" desde el que puedes comenzar, lo cual es genial.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

Answer 2

Tendemos a crear hojas de estilos separadas para IE y FF para evitar sus "caprichos". Luego, se puede usar un código simple para asegurar que se use la hoja de estilo correcta.

<!--[if lte IE 6]> works for < than IE 6 
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" /> 
<![endif]--> 

También hay obras para IE 6

etc ...

Answer 3

usamos jQuery para decorar nuestros elementos HTML y dejar que lidiar con problemas con el navegador cruz.

Answer 4

En esencia, lamenta que los valores predeterminados del navegador no coincidan con todos los navegadores, pero no quiere cambiar esas propiedades directamente.

Esto no tiene sentido.

Como otros recomendaría usar una hoja de estilo de reinicio (soy un gran admirador de Eric Meyer's) y luego diseñar los bordes exactamente de la manera que desee. Fácil. Claro. Sin inconvenientes.