0

Chrome: https://i.stack.imgur.com/Ob1E9.jpg Firefox: https://i.stack.imgur.com/8bdw5.jpg

Well, I only have a <div> in my <body>, here's the code:

<body>
<div id="wrapper"></div>
</body>

Together with some simple styles:

#wrapper
{
    width: 692px;
    height: 100px;
    outline: 1px solid green;
    margin: 10px auto;
}

When opening "Inspect element" in Google Chrome, I have a weird values with numbers after decimal point for both width and margin in the box-model (691.989 for width and 373.281 for margin). This issue however doesn't occur in FireFox. Providing pictures below:

Could someone please explain to me why this occurs and how can I fix this? It's rather annoying when you add more divs and the widths are all over the place. Thanks!

Arno
  • 356
  • 5
  • 18
  • I can't reproduce the error, I get exact values in both browsers. Have you tried updating Chrome? – Georgi Demirev May 27 '14 at 07:45
  • 1
    Go to the setting icon in the top-right of your inspector and try "Restore defaults and reload" – Michael Rader May 27 '14 at 07:46
  • in my Chrome it's perfect – Anil Bhattarai100 May 27 '14 at 07:48
  • just checked with your code. no error found. http://jsfiddle.net/mFQq7/2/ – Amit May 27 '14 at 07:48
  • Thank you for all your responds. It appears that `` element, which should be taking all of it's width takes 1454.545 as well, this is so odd. @MichaelRader I've tried what you suggested, didn't help. @СърГеоргиДемирев Version 35.0.1916.114 m Google Chrome is up to date. – Arno May 27 '14 at 07:53
  • P.S: I've tried to load the page without a local server, it appears that's where the problem lies since now it's working properly... – Arno May 27 '14 at 07:57
  • @Arno you may need a css style reset in your stylesheet as all browsers do behave differently. Try this http://www.cssreset.com/scripts/eric-meyer-reset-css/ – user3520443 May 27 '14 at 10:57

0 Answers0