1

Estou com problemas com margens CSS que levam porcentagem em um projeto responsivo. Tem objetos que levam margem de 15% referente ao contâiner, e no IE10 e Safari a diferença chega a ser 10% a mais do que deveria. No Chrome e no Firefox esta tudo normal.

Alguém já teve esse problema? e como resolveu?

No jsfiddle não vai conseguir visualizar.

Ex:

objeto {
  margin: 15% 0 0 0;
} 

O resultado é o dobro da distância nos navegadores citados e não ha nenhum objeto div anterior a esse para explicar isso.

11
  • 4
    ajude nos a responder postando seu código 18/02/2014 às 17:39
  • Voce poder da uma exemplo no jsfiddle.net?
    – Sampson
    18/02/2014 às 17:44
  • 1
    Tem cara de discrepância de box model. Seu HTML tem um doctype no topo? Qual?
    – bfavaretto
    18/02/2014 às 17:56
  • @bfavaretto tinha esquecido da parte da discrepância heheh quase dormindo aqui. Bom, assim sendo, acredito que não há como responder o problema da discrepância sem um maior detalhamento da parte do Helton. 18/02/2014 às 18:02
  • 2
    @JonathanSampson por incrivel que pareça sua resposta aparenta ter resolvido o problema, hahaha apesar que ela destruiu todo o layout em porcentagem mas os objetos estão se mantendo no lugar, colocar como resposta vou terminar ajustar o layout novamente e faço as devidas considerações, Valeu a todo mundo.
    – HeltonSS
    18/02/2014 às 18:16

3 Respostas 3

3

No passado, o modelo do box era diferente para o Internet Explorer e todos os outros navegadores. Hoje, para todos os teus projectos, é inteligente adicionar o seguinte:

*, :before, :after, ::before, ::after {
    box-sizing: border-box;
}

Esta declaração vai-te resolver muitos problemas com o layout nos teus projectos.

2
  • 2
    Hi there Jonathan, nice to see you around here :) (big fan here) (comentário a ser removido em breve...)
    – Zuul
    18/02/2014 às 18:36
  • Obrigado, Zuul. Estou tentando melhorar meu Portuguese. Tem nada melhor dq Stack Overflow em Portuguese :)
    – Sampson
    18/02/2014 às 18:40
0

tenta usar hacks para navegadores HACK PARA IE 10

  <!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}</script><!--<![endif]-->
.ie10 .objeto{
 margin-top:5%;  /*para tirar a diferença que esta dando a mais*/
}

hack para Safari e Chrome /* Somente para Chrome e Safari */

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .objeto{ margin-top:5%; } /*para tirar a diferença que esta dando a mais*/
}
0

Você pode tentar dar um CSS Global Reset, todo browser tem prioridades para definir o CSS de uma página.

A ordem é:

  1. CSS inline

    Através do uso do atributo style cujo mesmo não recomendo:

    <div style=”float:left”>
    
  2. CSS na página

    Outra coisa que não recomendo, e não vejo necessidade. É quando coloca a TAG style dentro da TAG head:

    <style>
      .publicidade {
        width: 200px;
      }
    </style>
    
  3. CSS externo

    Esse é o CSS normal, quando invocamos dentro do head:

    <link href=”home.css” type=”text/css” rel=”stylesheet”/>
    
  4. CSS definido pelo browser

    Sim, isso existe e é isso que nos causa problemas.


Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos parágrafos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…

É aí que entra o CSS Global Reset, que são uma série de propriedades CSS atribuídas a todos os elementos HTML, justamente para retirar o CSS definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Safari, Internet Explorer, Opera, etc.

Existem diversos CSS Global Reset (normalmente as pessoas colocam alguma coisa a mais para facilitar no seu projeto), mas todos eles variam pouco.


Eu uso esse aqui:

{outline-color:invert;outline-style:none;outline-width:medium;}
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,
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-weight: normal;
  font-style: inherit;
  font-size: inherit;
  font-family: inherit;
  vertical-align: baseline;
}
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea { font-size: inherit; }
1
  • Mano ja tentei isso tbm.
    – HeltonSS
    18/02/2014 às 18:08

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 .