Relative margin with large variation between browsers

In the past, the box template 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 layout in your projects.

Try to use browser hacks 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*/
}

You can try to give a CSS Global Reset, every browser has priorities to define the CSS of a page.

The order is:

<div style=”float:left”>

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

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

When no CSS is found for an element ( div , p , h1 , img , etc ...), the browser places on its own, what will be the size of the titles, , margin between elements, default font, padding of page, element borders, etc ...

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

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

I use this here:

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