Question: Why do the pictures and input boxes on the page shift after converting html to jsp? _html/css_WEB-ITnose

Front-end html jsp

I am a student in school and am not a front-end major, but I have no choice but to build my own small project and have to do everything myself

I found a backend page designer on the Internet The template is html, and then I rebuilt it on the jsp page. The browsing effect when opening the two pages with FX or Chrome browsers is the same, but when browsing with IE, the jsp one has an input box and some Text shifting

Please ask everyone on the forum why this is?

Can it be saved?

Reply to the discussion (solution)

Set the front of the page


Note that this content cannot be preceded by any other content,

Set the
at the front of the page

Note that there cannot be any other content in front of this content.

Sorry, it’s useless

It turns out that when I built a jsp, the default was

It won’t change if I switch to yours

It’s no problem to use IE to browse the position of each element in html. , written in jsp, the IE browser will appear shifted

The final running results of jsp are all html. Do you really guarantee that the html in the browser source code is exactly the same?

You can directly change the extension of your html file to jsp and then test it with the browser

Generally there are the following reasons for differences:
1. The difference in dtd
2. Different file encodings (jsp and css files)
3. The order of js code execution is different. Accessing DOM elements needs to be done after onload is completed

The final results of jsp running are all html, do you really guarantee that the html in the browser source code is exactly the same?

You can directly change the extension of your html file to jsp and then test it with the browser
I tried this according to yours and changed it directly to jsp. There was no shift when I opened it, but when I Add gt to this jsp ; After that, there is a displacement. Why is this?

In the upper right corner of IE browser, page -> Compatibility View, uncheck this option...

In the upper right corner of IE browser, page -> Compatibility View, in front of this option Uncheck...
It's useless

Different DTDs have different browser parsing methods. If you don't specify the DTD explicitly, different browsers will use different default DTDs
Therefore, In order to ensure browser compatibility, a dtd needs to be explicitly specified.
The most commonly used one now is



followed by

The misalignment is css or js problem. If you really can’t find a solution, post your html, css, js, etc.

The misalignment is a problem with css or js. If you really can’t find a solution, post your html, css, js, etc.
It still doesn’t work

The page code is one of the 27 background page designs shared on the homepage. The decompressed file name is 1249564182_21200268. I haven’t built the login page in it. I haven’t built other pages yet.

Different DTDs require different browser parsing methods. If you don’t explicitly specify the DTD, different browsers use it. The default dtd is also different
Therefore, in order to ensure browser compatibility, a dtd needs to be explicitly specified.
The most commonly used one now is



followed by


If I don’t write a header, just let the browser Is it okay for the server to parse it by default?