HTML using CSS3 displays correctly in IE11 but not when render via Tomcat 7

Question

This is weird stuff and I hope someone can help me out understand why it is happening and how to fix it.

My environment is Windows 7 64-bit , IE 11 and Tomcat 7.0.47 .

I have a file index2.html which is using a CSS3 feature div {box-sizing: border-box;} . This is the whole file:

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

When I open index2.html in IE 11 , it displays correctly exactly like the way this JSFIDDLE is displaying. As you can see there are no vertical and horizontal scroll bars in the page.

Now in Tomcat 7 I deployed a simple Web application named srhtest. This is the structure:

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

The contents of MANIFEST.MF file are:

Manifest-Version: 1.0

The contents of web.xml file are:

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

I start Tomcat then open IE 11 and go to http://localhost:8080/srhtest

But the page is displaying incorrectly exactly like the way this JSFIDDLE2 is displaying when I remove the CSS3 . As you can see there are both vertical and horizontal scroll bars in the page. What am I doing wrong?

Answer 1

box-sizing property has two kinds of attributes:

content-box

This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not include the padding, border or margin. Note: Padding, border & margin will be outside of the box eg If apply this code,

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

This rendered in the browser of total width : 220px .

So the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

border-box

The width and height properties include the padding and border, but not the margin. Note that padding and border will be inside of the box eg

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

This rendered in the browser of total width: 200px .

Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

So, if you delete this code

div {
    box-sizing: border-box;
}

The default of box-sizing is content-box and is rendered the browser width and height according to the content-box rules.

More explanation can view at that link also: box-sizing

Answer 2

It sounds like your document is getting displayed in Compatibility Mode , which unfortunately is the default for local intranet sites, and would apply in your specific usage (presuming that your development box is: domain-joined ), since you are retrieving the document from: http://localhost .

You can use the following to confirm whether this is true:

Press the [F12] key to open the IE Developer Tools .
Press the [Ctrl-8] key combination to open the Emulation display.
In the left column, labeled: Mode , check the first value: Document mode .

If the Document mode value is: IE11 , then my guess is incorrect; however, if IE is in Compatibility Mode , it will adopt IE7 behavior:

If the document contains a valid <!DOCTYPE> declaration (which it appears yours does), the IE7 document mode should be in use.
If not (which can be triggered by a hidden character or newline before the <!DOCTYPE> declaration), the IE5 Quirks document mode will be in use.

Resolving the Problem:

Update the IE handling for websites that are in the Local Intranet Zone :

Click on Tools (the gear cog icon in the upper right corner).
From the drop-down menu, select: Compatibility View settings .
Deselect the option: Display intranet sites in Compatibility View .

This should resolve the behavior you are describing. If you are in a scenario where others will be visiting a development server that is is the Local Intranet Zone , send me a comment message, because there are a couple additional steps that you can take to resolve this issue for those users.

HTML using CSS3 displays correctly in IE11 but not when render via Tomcat 7

Question

2 answers

solution1
1 2016-05-20 07:57:42

content-box

border-box

solution2
1 ACCPTED 2016-05-20 16:12:31

Resolving the Problem:

HTML using CSS3 displays correctly in IE11 but not when render via Tomcat 7

Question

2 answers

solution1 1 2016-05-20 07:57:42

content-box

border-box

solution2 1 ACCPTED 2016-05-20 16:12:31

Resolving the Problem:

solution1
1 2016-05-20 07:57:42

solution2
1 ACCPTED 2016-05-20 16:12:31