Java 使用CSS3的HTML在IE11中正确显示，但在通过Tomcat7渲染时不会正确显示_Java_Html_Css_Tomcat

Java 使用CSS3的HTML在IE11中正确显示，但在通过Tomcat7渲染时不会正确显示

java html css tomcat

Java 使用CSS3的HTML在IE11中正确显示，但在通过Tomcat7渲染时不会正确显示,java,html,css,tomcat,Java,Html,Css,Tomcat,这是很奇怪的事情，我希望有人能帮助我理解为什么会发生这种情况，以及如何解决它我的环境是windows7 64位，ie11和tomcat7.0.47 我有一个文件index2.html，它使用CSS3功能div{box size:border box；}。这是整个文件： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</ti

这是很奇怪的事情，我希望有人能帮助我理解为什么会发生这种情况，以及如何解决它

我的环境是

windows7 64位

，

ie11

和

tomcat7.0.47

我有一个文件index2.html，它使用

CSS3

功能

div{box size: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>

MANIFEST.MF文件的内容包括：

Manifest-Version: 1.0

<?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>

web.xml文件的内容包括：

Manifest-Version: 1.0

<?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>


index2.html

我启动Tomcat，然后打开

IE 11

并转到

但是页面显示不正确，与我删除

CSS3

时的显示方式完全相同。如您所见，页面中既有垂直滚动条，也有水平滚动条。我做错了什么？

框大小属性有两种属性：
内容框这是CSS标准指定的初始值和默认值。测量的宽度和高度属性仅包括内容，而不包括填充、边框或边距。注意：填充、边框和边距将在框外 e、 g.如果适用本规范

.box { width: 200px; border: 10px solid red; }
这将在总宽度为220px的浏览器中渲染
因此，元素的尺寸计算如下：，宽度=内容的宽度，高度=内容的高度（不包括边框和填充的值）
边框框宽度和高度属性包括填充和边框，但不包括边距。请注意，填充和边框将位于框内 e、 g
这将在总宽度为200px的浏览器中渲染
此处尺寸计算如下：，宽度=边框+填充+内容宽度，高度=边框+填充+内容高度
所以，如果你删除这个代码

div { box-sizing: border-box; }
框大小的默认设置为内容框，并根据内容框规则呈现浏览器宽度和高度
更多说明也可通过该链接查看：
框大小属性有两种属性：
内容框这是CSS标准指定的初始值和默认值。测量的宽度和高度属性仅包括内容，而不包括填充、边框或边距。注意：填充、边框和边距将在框外 e、 g.如果适用本规范

.box { width: 200px; border: 10px solid red; }
这将在总宽度为220px的浏览器中渲染
因此，元素的尺寸计算如下：，宽度=内容的宽度，高度=内容的高度（不包括边框和填充的值）
边框框宽度和高度属性包括填充和边框，但不包括边距。请注意，填充和边框将位于框内 e、 g
这将在总宽度为200px的浏览器中渲染
此处尺寸计算如下：，宽度=边框+填充+内容宽度，高度=边框+填充+内容高度
所以，如果你删除这个代码

div { box-sizing: border-box; }
框大小的默认设置为内容框，并根据内容框规则呈现浏览器宽度和高度
更多说明也可通过该链接查看：
听起来您的文档将以
兼容模式显示，不幸的是，这是本地intranet站点的默认模式，并且将适用于您的特定用途（假定您的开发框为：加入域），因为您正在从以下位置检索文档：http://localhost 您可以使用以下内容来确认这是否正确：按[F12]键打开IE开发者工具按[Ctrl-8]组合键打开仿真显示在标签为：Mode的左列中，检查第一个值：Document Mode 如果文档模式值为：IE11 ，则我的猜测不正确；但是，如果IE 处于兼容模式，它将采用IE7 行为：如果文档包含有效的声明（看起来您的声明是有效的），则应使用IE7 文档模式如果不是（可能由声明前的隐藏字符或换行符触发），则将使用IE5怪癖文档模式解决问题：更新本地Intranet区域中网站的IE 处理：单击工具（右上角的齿轮齿图标）从下拉菜单中，选择：兼容性视图设置取消选择选项：在兼容性视图中显示intranet站点这将解决您正在描述的行为。如果您所处的场景中，其他人将访问位于本地Intranet区域的开发服务器，请向我发送一条评论消息，因为您可以采取一些额外的步骤来解决这些用户的此问题。听起来您的文档将以兼容模式显示，不幸的是，这是本地intranet站点的默认设置，并将应用于您的特定用途（假定您的开发框为：domain joined ），因为您要从以下位置检索文档：http://localhost 您可以使用以下内容来确认这是否正确：按[F12]键打开IE开发者工具按[Ctrl-8]组合键打开仿真显示在标签为：Mode的左列中，检查第一个值：Document Mode 如果文档模式值为：IE11 ，则我的猜测不正确；但是，如果IE 处于兼容模式，它将采用IE7 beha