1
我有一個ASP.NET MVC視圖，它在IE7上很好用，但是當我試圖用IE6查看它時看起來真的很糟糕。使用IE6時，頁面的白色區域（ContentPlaceHolder部分）聚集在右側，並且在調整窗口大小時會出現奇怪的現象。我查看了.aspx，Site.Master和Site.css，看看有什麼問題，但是我找不到它！有人可以幫忙嗎？下面是我的文件：HTML頁面佈局在IE7中看起來不錯，但IE6不好用
的Login.aspx：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="EventScheduler.View.Views.Account.Login" %>
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Login</h2>
<p>
Please enter your username and password below.
</p>
<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) { %>
<div>
<table>
<tr>
<td>Username:</td>
<td>
<%= Html.TextBox("username") %>
<%= Html.ValidationMessage("username") %>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<%= Html.Password("password") %>
<%= Html.ValidationMessage("password") %>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login" /></td>
</tr>
</table>
</div>
<% } %>
</asp:Content>
的Site.Master：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="EventScheduler.View.Views.Shared.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><%= Html.Encode(ViewData["Title"]) %></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>ASCCC Event Scheduler Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LoginUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
ASCCC Event Scheduler Application © Copyright 2009
</div>
</div>
</div>
</body>
</html>
的site.css：
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
a:link
{
color: #034af3;
text-decoration: underline;
}
a:visited
{
color: #505abc;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #12eb87;
}
p, ul
{
margin-bottom: 20px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px !important;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
margin-bottom: 30px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#footer
{
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}
ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a
{
background-color: #fff;
color: #000;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.error
{
color:Red;
}
#menucontainer
{
margin-top:40px;
}
#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#logindisplay a:link
{
color: white;
text-decoration: underline;
}
#logindisplay a:visited
{
color: white;
text-decoration: underline;
}
.field-validation-error
{
color: #ff0000;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
body
{
}
.button
{
width:75px
}
.eventLink
{
}
.alert
{
color:Red
}
.message
{
color:Green
}
.registrationField
{
width:700px
}
.registrationField_Enabled
{
background-color:#336699;
width:700px
}
.fieldName
{
}
.requiredBox
{
}
.detailType
{
}
.fieldOptions
{
}
.pageTitle
{
color:Black;
font-size:large
}
.pageSubTitle
{
color:Black;
font-size:medium
}
.staticFieldLabel
{
color:Black;
width:150px
}
.staticFieldTextBox
{
width:250px
}
.dynamicFieldLabel
{
color:Black;
width:150px
}
.dynamicFieldDropDown
{
width:250px
}
.dynamicFieldPhoneNumberUS1
{
width:30px;
}
.dynamicFieldPhoneNumberUS2
{
width:30px;
}
.dynamicFieldPhoneNumberUS3
{
width:40px;
}
.dynamicFieldPhoneNumberUS4
{
width:40px;
}
這是一個CSS問題。 – superUntitled 2009-02-13 07:50:55