Estoy trabajando en una página web en Google Chrome. Se muestra correctamente con los siguientes estilos.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Es importante señalar que no he definido estos estilos. En Chrome dev tools, dice user agent stylesheet en lugar del nombre del archivo CSS.
Ahora, si envío un formulario y se produce algún error de validación, obtengo la siguiente hoja de estilos:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
El tamaño de letra
de estos nuevos estilos está perturbando mi diseño. ¿Hay alguna manera de forzar mis hojas de estilo y, si es posible, sobrescribir completamente la hoja de estilo por defecto de Chrome?
¿Cuáles son los navegadores de destino? Los diferentes navegadores establecen diferentes reglas CSS por defecto. Intenta incluir un restablecimiento de CSS, como el meyerweb css reset o normalize.css, para eliminar esos valores predeterminados. Busca en Google "css reset vs normalize" para ver las diferencias.
En cuanto al concepto "hoja de estilo del agente de usuario", consulte la sección Cascade de la especificación CSS 2.1.
Las hojas de estilo del agente del usuario son anuladas por cualquier cosa que usted establezca en su propia hoja de estilo. Son sólo la base: en ausencia de cualquier hoja de estilo proporcionada por la página o por el usuario, el navegador todavía tiene que renderizar el contenido de alguna manera, y la hoja de estilo del agente de usuario sólo describe esto.
Así que si crees que tienes un problema con una hoja de estilo del agente de usuario, entonces realmente tienes un problema con tu marcado, o con tu hoja de estilo, o con ambos (sobre los que no has escrito nada).