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
No comments:
Post a Comment