IE9 shows different results of same code if displayed in JSFiddle

the following fiddle looks good in IE 9, padding and border of the field are substracted from width due to box-sizing: border-box. However if i display the very same code as normal html-site, padding and border are added to the width making the field bigger than the container.

Any ideas what the problem is here?

Here is the fiddle that looks good in ie9: http://jsfiddle.net/GgwNs/1/

Here is the same code not looking good displayed as html-site:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <style type='text/css'>
    .container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
    margin-bottom:60px;
}
.content
{
    width: 100%;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing:        border-box;
    padding: 0 20px;
    border: 5px solid #000
}
  </style>

</head>
<body>
  <div class="container">
    <input class="content" id="Text1" type="text" />
</div>

</body>

</html>

Thank you

Solution

Make sure that you are setting the standards with the appropriate meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">