The project has multiple JSP pages that use the same JSP page content. Therefore, I use JSP pages embedded with JSP pages. However, when the two JSP pages are opened in the browser, the style exists, and the style is lost after the page is embedded.
When the two JSP pages are displayed separately in the browser, the style can be displayed normally. There are top pages. JSP and index. JSP, and top the page in the same level directory. JSP is embedded into another index. some styles on the JSP page will be lost. I used several methods when embedded. First, the JSP command <% @ include file = "Top. JSP "> result: Some styles are lost. Type 2: IFRAME <IFRAME Src = "Top. jsp" Width = "100%" Height = "100%" Scroll = "no" Frameborder = "0" Name = "content" > </Iframe>Result: The content of the top part is blocked by the content of index. jsp, and the layer display style in index. jsp is still lost. Because there is a hidden layer in my top. jsp, this layer is displayed when a button is clicked. However, after IFRAME is used, the top. jsp page is embedded in index. jsp by structure (the function of IFRAME element is to embed a document in an HTML file and create a floating frame. IFRAME can be embedded in any part of the webpage). After the page is compiled, it is two separate pages, so it blocks the third: include action <JSP: Include page = "Top. JSP "> result: Examples of loss of hidden styles on two pages: When you click the" login "button, the effect is displayed. However, problems may occur when you use the above embedded methods, the first and third types are non-display layers, and the second type of display layer is indexed. content blocking in JSP. There are many solutions I can query online: Path Problems (relative paths and absolute paths): the reason for this solution is that the image may not be displayed to obtain the absolute path: 1. add the following statement to the JSP page: <% string Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; request. setattribute ("basepath", basepath); %> in this way, you can use a style sheet on other pages to write <LINK rel = "stylesheet" type = "text/CSS" href = "$ {basepath} CSS/right_content.css"> (or you can also write it in this way, <% stri Ng Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; %> <LINK rel = "stylesheet" type = "text/CSS" href = "<% = basepath %> CSS/right_content.css"> Get basepath for each page, because this method is stored in the page. The result of smart single page usage is: My styles are gone. Second, the Case sensitivity problem (HTML is case insensitive and W3C is case-insensitive when it comes to HTML standards. But JSP is case sensitive) W3C on the HTML standard detailed connection: http://panjunlai.blog.163.com/blog/static/5819030120096255446267/ I did not have a detailed understanding of JSP standards. However, jsp can interact with Servlet, so it must be case sensitive like Java. Final Solution: remove the <HTML> and <body> labels in top. jsp (only remove the labels in top. jsp and do not go to other items): <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">