这是一件奇怪的事情，我希望有人能帮助我了解为什么会发生这种情况以及如何解决。
我的环境是Windows 7 64-bit、IE 11和Tomcat 7.0.47。
我有一个文件index2.html，它使用CSS3功能div {box-sizing: border-box;}。这是整个文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin:0;
}
div {
box-sizing: border-box;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
</body>
</html>
当我在IE 11中打开index2.html时，它的显示方式与此JSFIDDLE的显示方式完全相同。正如您所看到的，页面中没有垂直和水平滚动条。
现在在Tomcat7中，我部署了一个名为srhtest的简单Web应用程序。这就是结构：
srhtestMETA-INFMANIFEST.MF
srhtestWEB-INFclasses (empty directory)
srhtestWEB-INFlib (empty directory)
srhtestWEB-INFweb.xml
srhtestindex2.html
MANIFEST.MF文件的内容是：
Manifest-Version: 1.0
web.xml文件的内容为：
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<welcome-file-list>
<welcome-file>index2.html</welcome-file>
</welcome-file-list>
</web-app>
我启动Tomcat，然后打开IE 11并转到http://localhost:8080/srhtest
但是页面显示不正确，就像我删除CSS3时JSFIDDLE2的显示方式一样。正如您所看到的，页面中既有垂直滚动条，也有水平滚动条。我做错了什么？
听起来您的文档将显示在Compatibility Mode中，不幸的是，这是本地intranet站点的默认设置，并且适用于您的特定用途(假设您的开发框为：domain-joined)，因为您从：http://localhost检索文档。
您可以使用以下内容来确认这是否属实：
- 按[F12]键打开IE
Developer Tools - 按[Ctrl-8]组合键打开
Emulation显示屏 - 在标记为：Mode的左列中，检查第一个值：Document Mode
如果文档模式值为：IE11，则我的猜测不正确；但是，如果IE在Compatibility Mode中，它将采用IE7行为：
- 如果文档包含有效的
<!DOCTYPE>声明(您的文档似乎包含该声明)，则应使用IE7文档模式 - 如果不是(可以由
<!DOCTYPE>声明之前的隐藏字符或换行符触发)，则将使用IE5 Quirks文档模式
解决问题：
更新本地Intranet区域:中网站的IE处理
- 单击工具(右上角的齿轮图标)
- 从下拉菜单中，选择：兼容性视图设置
- 取消选择选项：在兼容性视图中显示intranet站点
这应该可以解决您所描述的行为。如果您所在的场景中其他人将访问Local Intranet Zone开发服务器，请给我发一条评论消息，因为您可以采取一些额外的步骤来为这些用户解决此问题。
框大小属性有两种属性：
内容框
这是CSS标准指定的初始值和默认值。宽度和高度属性的测量仅包括内容，但不包括填充、边框或边距。注：填充，边框&边距将在框外例如，如果应用此代码，
.box {
width: 200px;
border: 10px solid red;
}
这是在的浏览器中渲染的，总宽度：220px。
因此，元素的尺寸计算为，width=内容的宽度，height=内容的高度(不包括边框和填充的值)。
边框框
宽度和高度属性包括填充和边框，但不包括边距。请注意，填充和边框将位于框内例如
.box {
box-sizing: border-box;
width: 200px;
border: 10px solid red;
}
这是在的浏览器中渲染的，总宽度：200px。
这里，尺寸计算为，width＝border+padding+内容的宽度，height＝border+padding+属性的高度。
所以，如果你删除这个代码
div {
box-sizing: border-box;
}
框大小的默认设置为内容框，并根据内容框规则呈现为浏览器的宽度和高度。
更多解释也可以在该链接中查看：箱子尺寸