user-agent - content - margin css
¿Qué hace que la "hoja de estilo del agente de usuario" use "cuadro de borde" en lugar de "cuadro de contenido" para el tamaño de la caja? (3)
No, no puede tocar la hoja de estilo predeterminada del navegador, y sí, los navegadores tienen diferentes reglas para el tamaño de la caja específicamente con respecto a los campos de formulario. Esto es para la compatibilidad con navegadores antiguos que solían implementar campos de formulario completamente con widgets nativos del sistema operativo que CSS no podía estilizar (y que no tenían "borde" o "relleno" como tales).
¿Por qué no poner la regla de -webkit-box-sizing / -webkit-box-sizing -moz-box-sizing / -webkit-box-sizing en la hoja de estilo del sitio? Funciona para mí, a menudo lo uso para hacer que las entradas con anchos establecidos se alineen en los navegadores modernos. (Sin embargo, IE 6–7 no lo admite, por lo que necesita ayuda adicional).
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, una propiedad de estilo debe ser anulada).
También tengo la impresión de que varios sitios web, incluido Mozilla, consideran que el valor predeterminado de la propiedad de tamaño de caja para Webkit y Mozilla es "caja de contenido".
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é esto es así.
En una página vemos una propiedad de tamaño de cuadro de "cuadro de borde" en el Inspector web o la consola. Se asigna a la entrada del selector CSS : no ([tipo = "imagen"]), área de texto .
En la otra página no se menciona la propiedad de tamaño de caja en el Inspector web o la consola.
¿Alguien sabe si hay alguna manera de afectar directamente la definición de tamaño de cuadro en la hoja de estilo de agente de usuario para una página en particular? Tal vez hay una biblioteca que hace esto? Estamos usando prototype.js y swfobject.js en la aplicación ...
ACTUALIZACIÓN : En caso de que no estuviera claro en casi todas las páginas de mi aplicación web y en cada página "ficticia" que he probado en la propiedad de tamaño de caja, tiene el valor predeterminado de "caja de contenido". Por alguna razón, una página particular de mi aplicación web muestra en el inspector web que la hoja de estilo del agente de usuario (la que usa el navegador para sus valores predeterminados) ha establecido esa propiedad en "cuadro de borde". No puedo, por mi vida, averiguar por qué es esto. Estoy buscando cualquier cosa que pueda hacer que Firefox cambie el valor predeterminado de esa propiedad.
Tuve el mismo problema en Chrome que, de forma predeterminada, agregó la siguiente regla de estilo de agente de usuario:
input:not([type="image"]), textarea {
box-sizing: border-box;
}
Después de agregar la propiedad doctype <!DOCTYPE html> la regla ya no apareció.
Acabo de tener este mismo problema. Lo que estaba sucediendo en mi caso era que alguien había puesto un fragmento de código Javascript encima del <!doctype html> . Como resultado, cuando inspeccioné DOM a través de firebug, parecía que el documento no tenía un doctype.
Cuando eliminé el fragmento de código JS de manera que la declaración doctype estaba en la parte superior del archivo, el doctype reapareció y solucionó los problemas de tamaño de caja que estaba viendo (el mismo que tenía). Ver:
Espero que esto ayude.