9

Quando eu defino o padding de alguma div dá uma diferença de 1px, eu estou construindo um menu, define o padding na #menu ul li a e a diferença de um navegador para o outro é mais 4 px, existe algum hack para isso?

<body> 
 <section>
  <header>
  <nav id="menu">
   <ul>
    <li><a href="home.php">Home</a></li> 
    <li><a href="produtos.php">Produtos</a></li> 
    <li><a href="contato.php">Contato</a></li> 
    <li><a href="quemsomos.php">Sobre nos</a></li> 
   </ul> 
  </nav>
  </header> 
 <section> 
</body> 
</html>
   body {
     background-color:#87CEEB;
     width:100%;
     height:10%;
     }
   header {
     width:1100px;
     height:200px;
     background-color:white;
     margin-left:120px;
     }
   nav#menu ul {
         padding-top:209px;
     padding-left:2px;
    }
   nav#menu li{
    margin: -2px; /*TIRA O ESPAÇAMENTO DO MENU/ JUNTA OS*/
     }
   nav#menu ul li { 
    display: inline; /*DEIXA O MENU NA HORIZONTAL*/
    }
   nav#menu ul li a {
    background-color:#FFF68F;
    text-decoration: none; /*TIRA O ANDERLINE DO MENU*/
        padding-right:110px; /* DEFINE O TAMANHO DO MENU*/
        padding-left:110px;   /* DEFINE O TAMANHO DO MENU*/
    padding-bottom:10px;/* DEFINE O TAMANHO DO MENU*/
    padding-top:10px;/* DEFINE O TAMANHO DO MENU*/
    margin-top:6px;
}


5
  • 1
    Eu não gosto de usar hacks para nada, talvez haja algo em seu código que posse ser melhorado ou reorganizado. Poderia psotar o [~tag:css] e o html para que possamos ver Commented 7/04/2014 às 15:47
  • Provavelmente o problema não está no padding, e sim em alguma outra coisa, como caracteres invisíveis ou diferença de altura de linha e/ou fontes (mesmo que seja só num espaço em branco). Queira editar a pergunta e postar o código que você está usando.
    – Largato
    Commented 7/04/2014 às 16:10
  • Se o teu html está exatamente assim, acho que te falta fechar o nav: </nav>
    – Jorge B.
    Commented 7/04/2014 às 16:32
  • Fechei a nav, n é esse o problema, finalmente consegui postar o css, é a primeira vez q estou usando esse fórum.
    – evandro
    Commented 7/04/2014 às 16:36
  • A questão é que a fonte é renderizada diferente em cada navegador. Tendo assim cada fonte uma largura diferente. O ideal seria adicionar uma largura e altura fixa se quiser esse nível de exatidão, mas isso normalmente é aceitado por pessoas que entendem como funciona o desenvolvimento web.
    – teefars
    Commented 12/03/2019 às 20:20

3 Respostas 3

3

Acrescente as definições de fontes, e veja se ao menos fica igual em todos os browsers:

#menu ul, #menu ul li {font-size: 15px; line-height: 20px}
1
  • Algum tempo atrás tive o mesmo problema, mas não sabia nem o que pesquisar, sabe quando o professor pergunta qual sua dúvida? e você não sabe nem o que perguntar, hehehe comigo aconteceu isso, mas a primeira resposta, no caso, a de bacco resolveu meu problema, Vleu Bacco Deus te ajude irmão.
    – Cassiamani
    Commented 11/08/2014 às 18:26
3

O problema de espaçamento tem a ver com o tamanho das palavras combinado com o padding. da forma que está o teu código simplesmente não encaixa. sempre vai dar algum problema desde como a fonte é renderizada até o box-model do navegador.

Uma opção é fazer como neste exemplo que usa flexbox e deixar o navegador calcular o espaçamento por você.

Ou rever o teu código (assim deu certo, mas não sei se te atende):

no css:

  -- css reset omitido --
  *{box-sizing:border-box;-moz-box-sizing:border-box;}
  html{background-color:#87CEEB;}
  body{margin: 10px;}
  section{width:1100px;margin-left: auto;margin-right: auto;}
  header{height:200px;background-color:white;}
  nav li{
    float:left;
    width:275px;
    height:30px;
    text-align: center;
  }
  nav p {
    background-color:#FFF68F;
    height:50px;
    padding-top: 10px;
  }

no html:

<section>
    <header></header>
    <nav>
        <ul>
            <li><a href="#"><p>Home</p></a></li> 
            <li><a href="#"><p>Produção</p></a></li> 
            <li><a href="#"><p>Contato</p></a></li> 
            <li><a href="#"><p>Sobre nos</p></a></li> 
        </ul> 
    </nav>
</section>
0

Existe uma técnica comum em CSS que é a utilização de um arquivo que "reseta" os valores padrões que os navegadores costumam colocar por padrão nos elementos, desta forma fica mais fácil acompanhar e evitar que qualquer comportamento diferente ocorre entre os navegadores:

Geralmente um reset.css vem com esses valores: Usando RESET CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
1
  • Amigo, eu já tentei tudo qualquer tipo de reset, e isso não resolveu o problema. Obrigado pela atenção.
    – evandro
    Commented 7/04/2014 às 16:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .