IE9的CSS问题，特别搞笑！求高人解决！

博客专家认证

2011-09-04 09:39:53

这是JSP页面代码：

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>青鸟租房首页</title>
<link type="text/css" href="css/base.css" rel="stylesheet"/>
<script type="text/javascript" src="jscript/base.js" language="javascript"></script>
</head>
<body>
<div id="top">
<img src="images/logo.jpg" /><p class="logo">老左出租</p><br />
<p class="info">专业的房屋出租出售网络平台</p>
</div>
<div class="content">
<s:form action="page/user.jsp">
<div class="forminfo">
用户登录
<hr noshade="noshade" width="516px"/>
</div>
<table class="field" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="user_name" class="input" onblur="testUserNameIsNull()" /> <p id="usernameWarning" class="warning"></p></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="user_password" class="input"/> <p id="passwordWarning" class="warning"></p></td>
</tr>
</table>
<div class="buttons">
<s:submit value="立即登录" cssClass="button" />
<input type="button" value="注册" class="button" onclick="document.location='page/register.jsp'" />
</div>
</s:form>
</div>
</body>
</html>

以下为关联的CSS布局代码

body { font:18px/30px 宋体; background:#fff; }
body,p,form,input { margin:0; padding:0; }
.warning {color:#F00;
font-size:12px;
}
#top {padding:0;
position:relative;
left:10px;
top:10px;
}
#top img {float:left;
}
#top .logo {color:#339;
font-size:24px;
font-weight:bold;
}
#top .info {color:#909090;
font-size:12px;
float:none;
}
#right {position:absolute;
right:30px;
top:20px;
}
#right input {height:30px;
width:120px;
font-size:18px;
background:#008000;
border:none;
margin-right:20px;
color:#FFF;
float:right;
}
.content {height:382px;
width:516px;
margin:60px auto;
background-color:#DFF;
}
.content .forminfo {font-weight:bold;
height:54px;
}
.content .field {margin:30px auto;
height:150px;
width:350px;
float:none;
}
.content .field tr td {margin:10px;}
.content .field tr td .input{height:20px;
width:200px;
}
.content .buttons {margin:20px auto;
width:300px;
}
.content .buttons .button {height:30px;
width:120px;
font-size:18px;
background-color:#0080C0;
border:none;
margin-left:20px;
color:#FFF;
float:left;
}
#housesent {height:135px;
width:100%;
border:1px solid #000000;
}
#housesent .house_img img {height:135px;
width:160px;
float:left;
}
#housesent .house_info {float:left}
#housesent .house_info table {height:135px;}
#housesent .house_button {float:right;
margin-right:50px;
}
#housesent .house_button input {height:24px;
width:80px;
font-size:16px;
background:#008000;
border:none;
margin-right:20px;
margin-top:55px;
color:#FFF;
}

问题特别搞笑，在IE中，页面中的用户登录那几个字总是竖着的，恶心死我了。
我还给他专门放进div，控制高度54px，但那几个字还是竖着的。疯了，原本用360写的页面，结果放到IE9就成这样子。
不管我用尽各种办法，那几个字就是竖着的。

本来应该是下面这个样子的（因为我不会发图，就形象的发一下，应该能看懂）：

用户登录
——————————————————————————————
以下为表单内容省略

但是在IE里就是这样：

用
户
登
录
——————————表单都查到这横线里了——————————————

求解，到底怎么解决！在360浏览器里好好的，但是在IE里不行，不过我们要求必须在IE中要能用，所以没办法。
我主攻J2EE的，这个CSS实在不太懂，这是个练习项目，html代码也只能自己搞定了。求解！

...全文