O navegador web de hoxe percorreu un longo camiño dos días tolos onde calquera tipo de coherencia entre navegadores era un desexo de pensar. Os navegadores web de hoxe son moi compatibles coas normas. Eles xogan moi ben e ofrecen unha pantalla de páxina bastante coherente entre os distintos navegadores. Isto inclúe as versións máis recentes de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari e os diversos navegadores que se atopan na infinidade de dispositivos móbiles que se usan para acceder ao sitio web hoxe.
Aínda que o progreso foi certamente feito cando se trata de navegadores web e de como amosan CSS, aínda existen inconsistencias entre estas diversas opcións de software. Unha das inconsistencias comúns é a forma na que eses navegadores calculan as marxes, o recheo e as fronteiras por defecto.
Debido a estes aspectos do efecto do modelo de caixa todos os elementos HTML e porque son esenciais na creación de esquemas de páxina, unha visualización incoherente significa que unha páxina pode parecer xenial nun navegador, pero véxase lixeiramente noutro. Para combater este problema, moitos diseñadores web normalizan estes aspectos do modelo de caixa. Esta práctica tamén é coñecida como "reducción a cero" dos valores de marxes, recheo e bordos.
Unha nota sobre os valores por defecto do explorador
Os navegadores web teñen todos os valores predeterminados para algúns aspectos de visualización dunha páxina. Por exemplo, os hipervínculos son azuis e subliñados por defecto. Isto é consistente en varios navegadores e, aínda que é algo que a maioría dos deseñadores cambian para adaptarse ás necesidades de deseño do seu proxecto específico, o feito de que todos eles comezan cos mesmos defectos facilita a realización destes cambios. Desafortunadamente, o valor predeterminado para as marxes, o recheo e as fronteiras non teñen o mesmo nivel de coherencia entre navegadores.
Normalización de valores para márgenes e recheo
A mellor forma de resolver o problema do modelo de caixa inconsistente é configurar todas as marxes e os valores de comprimidos dos elementos HTML a cero. Hai algunhas formas que podes facer isto é engadir esta regra CSS á túa folla de estilo:
* {marxe: 0; padding: 0; }Esta regra CSS usa o carácter * ou comodín. Ese carácter significa "todos os elementos" e, basicamente, seleccionaría cada elemento HTML e establecerá as marxes eo enchemento a 0. Aínda que esta regra é moi inespecífica, porque está na súa folla de estilo externa, terá unha especificidade máis alta que o navegador predeterminado os valores fan. Dado que eses estándares son o que sobreescribiu, este estilo fará o que está a facer.
Outra opción é aplicar estes valores aos elementos HTML e corpo. Porque todos os outros elementos da túa páxina serán fillos destes dous elementos, a falla en CSS debería aplicar estes valores a todos eses outros elementos.
html, corpo {marxe: 0; padding: 0; }Isto iniciará o seu deseño no mesmo lugar en todos os navegadores, pero unha cousa que recordar é que unha vez que xira todas as marxes e acolchadas, necesitará activalo de forma selectiva para partes específicas da súa páxina web para lograr a aparencia e sinto que o teu deseño chama.
Bordos
Pode estar a pensar ", pero ningún explorador ten un bordo ao redor do elemento corpo por defecto". Isto non é estrictamente certo. As versións máis antigas de Internet Explorer teñen un bordo transparente ou invisible en torno a elementos. A menos que configure o bordo a 0, ese bordo pode alterar os esquemas da páxina. Se decidiu que seguirá a apoiar estas versións antigas de IE, necesitará solucionar isto engadindo o seguinte ao seu corpo e aos estilos HTML:
HTML, body {
marxe: 0px;
padding: 0px;
bordo: 0px;
}
Do mesmo xeito que se desactivou as marxes eo recheo, este novo estilo tamén desactivará os bordos predeterminados. Tamén podes facer o mesmo empregando o selector comodín mostrado anteriormente no artigo.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 27/09/16.