Question

以下小提琴在IE 9中看起来很好，由于box-sizing：border-box，字段的填充和边框从宽度减去。但是，如果我显示与普通html-site完全相同的代码，则填充和边框会添加到宽度，使字段大于容器。

任何想法是什么问题在这里？

这是在ie9中看起来很好的小提琴：http://jsfiddle.net/GgwNs/1/

以下是与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>

谢谢

Answer 1

确保使用适当的元标记设置标准：

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

如果在JSFiddle中显示，IE9显示相同代码的不同结果

1 个答案: