Question

我正在使用Eclipse Kepler创建一个Web应用程序，并尝试在启动我的功能之前设计我的jsp文件。当我将以下代码创建为基本的html文件时，可以在浏览器中以完美的设计打开它。但是当我在带有附加

的jsp文件中编写此代码时

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

作为前两行，文件失去了所有的位置样式。如果您在jsp中运行代码，您会注意到边界和链接颜色保持不变，但所有内容都位于同一位置。

任何人都知道如何处理这个问题？谢谢。

<html>
<head>
<title>Home</title>

<style>
body {
background-image: url(Images/whitebg.jpg);
background-repeat: no-repeat;
background-size: 100%;
}

#container {
width: 900px;
margin: 0 auto;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

#header img {
position: absolute;
top: 80;
left: 72;
width: 200;
height: 50;
}

#container a:visited {
color: blue;
}

#container a:hover {
color: red;
}

#welcome {
position: absolute;
top: 20;
right: 100;
}

#logout {
position: absolute;
top: 20;
right: 20;
width: 50px;
height:25px;
}

#links {
position: absolute;
top: 200;
left: 72;
}

#links ul {
list-style-type: none;
padding: 5 10 5 10;
border: 2px solid red;
border-radius: 10px;
}

#links li {
padding: 10 0 25 0;
}

#feed {
position: absolute;
top: 100;
left: 400;
width: 800px;
height: 400px;
}

#feedtext {
width:800px;
height:400px;
overflow: scroll;
}
</style>
</head>

<body>

<div id='container'>

<div id='header'>
    <img src='Images/mPowerlogo.jpg'/>
</div>

<div id='welcome'>
    Welcome, User1
</div>

<div id='logout'>
    <a href=''>Logout</a>
</div>

<div id='links'>
    <ul>
    <li><a href=''>Timecard Management</a></li>
    <li><a href=''>User Management</a></li>
    <li><a href=''>Customer Management</a></li>
    <li><a href=''>Admin</a></li>
    <li><a href=''>Reports</a></li>
        </ul>
</div>

<div id='feed'>
    <p>Recent Activity:</p>
    <textarea id='feedtext' readonly>

    </textarea>
</div>

</div>

Answer 1

更改0以外的位置以粘贴到它“px”。

top: 20px;

或者删除DOCTYPE，因为它要求HTML / CSS被认为是正确的（尽管它不是）。

提示： 的您也可以考虑在Java中使用“Windows-1252”。浏览器会将ISO-8859-1解释为Windows-1252（即使在Mac和Linux上）。并且会出现一些特殊字符，如MS Word之类的逗号引号。 HTML-5使这个隐藏的功能成为官方规范。

Answer 2

使用行<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，您正在将html版本从可能被解析为5的内容中更改（没有doctype，您最终会使用某种怪癖模式，甚至可以使用缺少px的样式）到4.01过渡。当你这样做时，就会发生这种情况。不同的版本 - 不同的结果。

您必须决定要使用哪个版本（如果是html 5 - 则使用<!DOCTYPE html>）。另外我建议使用UTF而不是8859-1（但这是一个选项）。

尝试更改该行<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>中的编码。

HTML样式代码在JSP文件中不起作用

2 个答案: