¿Qué hace que la "hoja de estilo del agente de usuario" use "border-box" en lugar de "content-box" para el tamaño del cuadro?

Tengo la impresión de que la hoja de estilo del agente de usuario en navegadores como Safari, Chrome y Firefox es algo que es interno al navegador y no se puede modificar directamente (más bien, se debe anular una propiedad de estilo).¿Qué hace que la "hoja de estilo del agente de usuario" use "border-box" en lugar de "content-box" para el tamaño del cuadro?

También estoy bajo la impresión debido a varios sitios web incluyendo Mozilla que el valor predeterminado de la tamaño de caja propiedad para Webkit y Mozilla es "content-box".

Probé esto en una página ficticia bastante simple vista en varios navegadores.

Mi problema es que en dos páginas de nuestra aplicación de producción la propiedad predeterminada es diferente, y no podemos entender por qué.

En una página vemos una propiedad de tamaño de caja de "border-box" en el Web Inspector o la consola. Se asigna a la entrada del selector de CSS : no ([type = "image"]), textarea.

En la otra página no hay mención de la propiedad de tamaño de caja en Web Inspector o consola.

¿Alguien sabe si hay alguna manera de afectar directamente la definición del tamaño del cuadro en la hoja de estilo del agente de usuario para una página en particular? Tal vez hay una biblioteca que hace esto? Estamos utilizando prototype.js y swfobject.js en la aplicación ...

ACTUALIZACIÓN: En caso de que no estaba claro en casi todas las páginas en mi aplicación web y en cada página "ficticia" He probado en la propiedad de tamaño de caja tiene el valor predeterminado de "cuadro de contenido". Por alguna razón, una página en particular en mi aplicación web muestra en el inspector web que la hoja de estilo del agente de usuario (la utilizada por el navegador para sus valores predeterminados) ha establecido esa propiedad en "border-box". No puedo entender por qué esto es así. Estoy buscando algo que pueda hacer que Firefox cambie su valor predeterminado para esa propiedad.

Fuente

2011-09-23 natlee75

No, no puede tocar la hoja de estilo predeterminada del navegador, y sí, los navegadores tienen reglas diferentes para el tamaño del cuadro específicamente con respecto a los campos del formulario. Esto es por compatibilidad con navegadores antiguos que solían implementar campos de formulario completamente con widgets nativos del sistema operativo que CSS no podía diseñar (y que no tenían 'borde' o 'relleno' como tal).

¿Por qué no simplemente pone su regla box-sizing/-moz-box-sizing/-webkit-box-sizing en la hoja de estilos del sitio? Funciona para mí, a menudo uso esto para hacer entradas con anchos de conjunto alineados en navegadores modernos. (IE 6-7 no lo admite, por lo tanto, necesita ayuda adicional.)

Fuente

2011-09-23 20:28:37 bobince

Terminé definiendo explícitamente tamaño de caja, tamaño de caja de moras y tamaño de caja de web en la hoja de estilos, pero esperaba averiguar qué podría haber causado esta rareza con la hoja de estilo del agente de usuario. – natlee75

Bueno, nunca se garantiza que las hojas de estilo del agente de usuario sean las mismas, pero la representación del campo de formulario es particularmente diversa debido a la cantidad de enfoques diferentes que los navegadores/sistemas operativos han tenido para diseñar formularios con CSS frente a la temática nativa del sistema operativo. – bobince

Hola bobince: sé muy bien que diferentes navegadores y sistemas operativos manejan estas cosas de manera diferente. Todos deberíamos como desarrolladores web, LOL. Mi problema no es realmente con eso, sino con el extraño comportamiento que estoy experimentando, donde en pequeñas páginas de prueba aisladas obtengo el comportamiento predeterminado "correcto", mientras que en esta página en particular en mi aplicación me estoy equivocando. " comportamiento por defecto. En otras palabras, los valores predeterminados de wonky que cambian de navegador a navegador deben ser al menos consistentes dentro del único navegador, pero no lo veo aquí. – natlee75

Acabo de tener este mismo problema. Lo que sucedía en mi caso era que alguien había puesto un fragmento de código Javascript arriba del <!doctype html>. Como resultado, cuando inspeccioné DOM a través de Firebug, parecía que el documento no tenía un doctype.

no-doctype

Cuando quité el fragmento de código JS tal que la declaración DOCTYPE estaba en la parte superior del archivo, el tipo de documento reapareció y fija los problemas de caja de tamaño que estaba viendo (el mismo que tenías) Ver:

Has-doctype

Espero que esto ayude.

Fuente

2011-11-30 18:42:43

Esto me ahorró mucho tiempo, gracias –

Agregar '' a mi html me ha solucionado este problema. – fguillen

Muchas gracias, no pensé que obtendría nada buscando en el código del agente de usuario CSS que se agrega. –

que tenían el mismo problema en el cromo que por defecto añade la siguiente regla de estilo de agente de usuario:

input:not([type="image"]), textarea { 
    box-sizing: border-box; 
}

Después de añadir la propiedad tipo de documento <!DOCTYPE html> la regla ya no apareció.

Fuente

2013-05-31 02:03:02

¿Qué hace que la "hoja de estilo del agente de usuario" use "border-box" en lugar de "content-box" para el tamaño del cuadro?

Respuesta

Cuestiones relacionadas