我正在尝试做一个高度为60px的带引导的DIV-box。
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
然后我为TopRow或TopCol指定一个高度：
#TopRow{
height:60px;
box-sizing: border-box;
}
我希望得到一个60像素的连续容器。元素显示的是正确的值，但chrome显示的高度约为80px。
我没有在IE 11中找到标尺功能来检查它是否是浏览器问题。
也许你也经历过类似的事情？
这是完整的代码，它给出了图片中的输出。标尺显示的高度约为80像素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Top Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}</style>
</head>
<body>
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
演示（未出现问题）
添加最大高度
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}
我终于找到了显示不同于css中设置的高度的原因：如果您缩放页面（即使在另一个时间在另一个窗口中），开发人员窗口将记住并将页面缩放到上次使用的值！没有任何暗示。。。。
