Large variation relative margin between browsers

Question

I’m having problems with CSS margins that take percentage in a responsive project. There are objects that have a 15% margin for the container, and in IE10 and Safari the difference is 10% more than it should be. Chrome and Firefox are all normal.

Has anyone ever had this problem? and how did it solve?

In jsfiddle you won’t be able to see.

Ex:

objeto {
  margin: 15% 0 0 0;
} 

The result is twice the distance in the cited browsers and there is no previous div object to explain this.

Answer 1

In the past, the model of box was different for Internet Explorer and all other browsers. Today, for all your projects, it’s smart to add the following:

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

This statement will solve many problems with the layout in your projects.

Answer 2

tries to use hacks for browsers HACK FOR 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 for Safari and Chrome /* Only for Chrome and Safari */

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

Answer 3

You can try to give a Global CSS Reset, all browser has priorities to define a page’s CSS.

The order is:

1. CSS inline

   Through the use of the attribute style which I do not recommend:

   <div style=”float:left”>
   

2. CSS on the page

   Another thing I don’t recommend, and I don’t see the need. It’s when you tag style within the TAG head:

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

3. External CSS

   This is the normal CSS, when we invoke inside the head:

   <link href=”home.css” type=”text/css” rel=”stylesheet”/>
   

4. CSS defined by browser

   Yes, that exists and that’s what causes us problems.

---

When no CSS is found for an element (div, p, h1, img, etc.. ), the browser puts on its own, what will be the size of titles, paragraphs, the margin between elements, the standard source, the padding page, edges of the elements, etc...

This is where the CSS Global Reset comes in, which is a series of CSS properties assigned to all HTML elements, precisely to remove the CSS defined by browser, leaving the properties of all elements equal. Thus drastically reduces the difference between Firefox, Safari, Internet Explorer, Opera, etc.

There are several CSS Global Reset (usually people put something else on to make your project easier), but they all vary little.

---

I use this one:

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