使用CSS3的HTML在IE11中正确显示，但通过Tomcat 7呈现时却不能正确显示

Question

这是很奇怪的东西，我希望有人能帮助我了解它为什么会发生以及如何解决。

我的环境是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的显示方式完全相同。 如您所见，页面中没有垂直和水平滚动条。

现在，在Tomcat 7中，我部署了一个名为srhtest的简单Web应用程序。 结构如下：

srhtest\META-INF\MANIFEST.MF
srhtest\WEB-INF\classes (empty directory)
srhtest\WEB-INF\lib (empty directory)
srhtest\WEB-INF\web.xml
srhtest\index2.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的显示方式。 如您所见，页面中同时存在垂直和水平滚动条。 我究竟做错了什么？

Answer 1

box-sizing属性具有两种属性：

内容框

这是CSS标准指定的初始值和默认值。 测量的宽度和高度属性仅包括内容，不包括填充，边框或边距。 注意：填充，边框和边距将在框外。例如，如果应用此代码，

.box {
    width: 200px;
    border: 10px solid red;
}

这在浏览器中呈现为总宽度：220px 。

因此，元素的尺寸计算为：宽度=内容的宽度，高度=内容的高度（不包括border和padding的值）。

边框

width和height属性包括填充和边框，但不包括边距。 请注意，填充和边框将在框内，例如

.box {
    box-sizing: border-box;
    width: 200px; 
    border: 10px solid red;
}

这在浏览器中呈现为总宽度：200px 。

此处的尺寸计算为：宽度=边框+填充+内容的宽度，高度=边框+填充+内容的高度。

因此，如果您删除此代码

div {
    box-sizing: border-box;
}

默认的box-sizing为content-box，并根据content-box规则呈现给浏览器宽度和高度。

也可以在该链接上查看更多说明：框大小

Answer 2

听起来您的文档正在以Compatibility Mode显示，很遗憾，这是本地Intranet站点的默认设置，并且将适用于您的特定用法（假定您的开发箱为： domain-joined ），因为您是从以下位置检索文档的： http://localhost 。

您可以使用以下命令确认是否为真：

按[F12]键打开IE Developer Tools 。
按下[Ctrl-8]组合键以打开“ Emulation屏幕。
在标记为： 模式的左列中，检查第一个值： 文档模式 。

如果文档模式值为： IE11 ，那么我的猜测是错误的； 但是，如果IE处于Compatibility Mode ，它将采用IE7行为：

如果文档包含有效的<!DOCTYPE>声明（您的声明确实如此），则应使用IE7文档模式。
否则（可以通过<!DOCTYPE>声明之前的隐藏字符或换行符触发），将使用IE5 Quirks文档模式。

解决问题：

更新本地Intranet区域中的网站的IE处理：

单击工具（右上角的齿轮齿轮图标）。
从下拉菜单中选择： 兼容性视图设置 。
取消选择选项： 在兼容性视图中显示Intranet站点 。

这应该解决您正在描述的行为。 如果您遇到其他人要访问位于Local Intranet Zone的开发服务器的情况，请给我发送一条评论消息，因为您可以采取一些其他步骤来为这些用户解决此问题。

使用CSS3的HTML在IE11中正确显示，但通过Tomcat 7呈现时却不能正确显示

问题描述

2 个解决方案

解决方案1
1 2016-05-20 07:57:42

内容框

边框

解决方案2
1 已采纳 2016-05-20 16:12:31

解决问题：

使用CSS3的HTML在IE11中正确显示，但通过Tomcat 7呈现时却不能正确显示

问题描述

2 个解决方案

解决方案1 1 2016-05-20 07:57:42

内容框

边框

解决方案2 1 已采纳 2016-05-20 16:12:31

解决问题：

解决方案1
1 2016-05-20 07:57:42

解决方案2
1 已采纳 2016-05-20 16:12:31