0

以下小提琴在 IE 9 中看起来不错，由于 box-sizing:border-box. 但是，如果我显示与普通 html 站点相同的代码，则将填充和边框添加到宽度中，使字段大于容器。

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

这是在 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>

谢谢

4

1 回答 1

2

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

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
于 2013-08-19T15:11:56.147 回答