O que é a folha de estilo do agente do usuário

I'estou trabalhando em uma página web no Google Chrome. Ele é exibido corretamente com os seguintes estilos.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

É importante notar que eu não't defini estes estilos. Nas ferramentas Chrome dev, diz folha de estilos do agente do usuário no lugar do nome do arquivo CSS.

Agora, se eu enviar um formulário e ocorrer algum erro de validação, eu recebo a seguinte folha de estilo:

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;
}

O "tamanho da fonte" destes novos estilos está a perturbar o meu design. Existe alguma forma de forçar as minhas folhas de estilo e, se possível, sobrepor completamente a folha de estilo padrão do Chrome's?

Solução

Quais são os navegadores alvo? Os diferentes navegadores definem regras CSS padrão diferentes. Tente incluir um reset CSS, como o meyerweb css reset ou normalize.css, para remover essas configurações padrão. Google "css reset vs normalize" para ver as diferenças.

Comentários (8)

Em relação ao conceito "folha de estilo de agente de usuário", consulte a seção Cascata na especificação CSS 2.1.

As folhas de estilo de agente de usuário são substituídas por qualquer coisa que você definir em sua própria folha de estilo. Elas são apenas o fundo do poço: na ausência de qualquer folha de estilo fornecida pela página ou pelo usuário, o navegador ainda tem que renderizar o conteúdo como, e a folha de estilo do agente do usuário apenas descreve isso.

Então se você acha que tem um problema com uma folha de estilo de agente do usuário, então você realmente tem um problema com sua marcação, ou sua folha de estilo, ou ambas (sobre a qual você não escreveu nada).

Comentários (3)

Defina os valores que você não'não quer ser usado a partir do Chrome's estilo agente de usuário no seu próprio CSS.

Comentários (0)