我的项目中有以下CSS。 CSS渲染完美但无法在IE和Firefox上正确渲染。控件被推向最右边。关于什么扭曲的任何建议？
body {
background-color:white;
}
.nvbar ul {
margin:0px;
padding:0px;
list-style:none;
}
.nvbar li {
float:left;
width:11%;
height:30px;
line-height:30px;
text-align:center;
border-right:6px solid white;
position:relative;
background: #0a0a0a;
/* Old browsers */
background: -moz-linear-gradient(top, #0a0a0a 0%, #0a0a0a 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0a0a0a), color-stop(100%, #0a0a0a));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0a0a0a 0%, #0a0a0a 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0a0a0a 0%, #0a0a0a 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #0a0a0a 0%, #0a0a0a 100%);
/* IE10+ */
background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a ', endColorstr='#0a0a0a ', GradientType=0);
/* IE6-9 */
}
.nvbar li ul {
position:absolute;
top:30px;
}
.nvbar li ul li {
float:none;
width:180%;
text-align:left;
padding-left:4px;
border-top:2px solid white;
}
.nvbar a {
/*font-family:Meiryo UI,verdana,san-serif;*/
font-family: Arial, Verdana, Helvetica, sans-serif;
color:white;
text-decoration:none;
font-weight:bold;
display:block;
}
.arrow1 {
width:0px;
height:0px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid black;
position:relative;
right:-70%;
}
.arrow2 {
width:0px;
height:0px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid black;
position:relative;
right:-70%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
.srvlist:hover .sub2 {
visibility:visible;
}
.prjlst:hover .sub1 {
visibility:visible;
}
.nvbar li:hover {
background: #eb2139;
/* Old browsers */
background: -moz-linear-gradient(top, #eb2139 0%, #eb2139 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb2139), color-stop(100%, #eb2139));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eb2139 0%, #eb2139 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eb2139 0%, #eb2139 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #eb2139 0%, #eb2139 100%);
/* IE10+ */
background: linear-gradient(to bottom, #eb2139 0%, #eb2139 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb2139', endColorstr='#eb2139', GradientType=0);
/* IE6-9 */
}
以下是它应该呈现的aspx页面。从徽标向下开始的所有内容都向右移动。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebBasedGenerator.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style2 {
width: 219px;
}
.auto-style3 {
text-align: left;
}
.auto-style1 {
width: 213px;
height: 61px;
}
.auto-style6 {
width: 145px;
text-align: left;
}
.auto-style7 {
text-align: left;
height: 23px;
}
.auto-style4 {
width: 150px;
text-align: left;
height: 23px;
}
.auto-style5 {}
.auto-style8 {
width: 150px;
text-align: left;
height: 65px;
}
.auto-style9 {
height: 65px;
}
.auto-style12 {
text-align: left;
width: 138px;
}
.auto-style13 {
text-align: left;
height: 23px;
width: 138px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="nvbar">
<ul>
<li><a href="WebForm1.aspx">Home</a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<%-- <li class="prjlst"><a href="#">Products</a>
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
</ul></div>
</li>--%>
<li class="srvlist"><a href="#">Services</a>
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li><a href="Generator.aspx">Generate </a></li>
<li><a href="TLGenerator.aspx">Generate (TL) </a></li>
<li><a href="PubKey.aspx">Instrument PKey</a></li>
</ul></div>
</li>
<li><a href="About.aspx">About</a></li>
</ul>
</div>
<div>
<div>
<table style="width: 100%;">
<tr>
<td class="auto-style2">
<table style="width: 100%;">
<tr>
<td class="auto-style8" colspan="4"><img class="auto-style1" src="Logo_screen.bmp" /></td>
<td class="auto-style9"> </td>
<td class="auto-style9"></td>
</tr>
<tr>
<td class="auto-style7" colspan="5">
<hr style="width: 667px" />
</td>
<td class="auto-style5" rowspan="4"></td>
</tr>
<tr>
<td class="auto-style7" colspan="2"></td>
<td class="auto-style4" colspan="2">
</td>
<td rowspan="14">
</td>
</tr>
<tr>
<td class="auto-style7" colspan="2"></td>
<td class="auto-style4" colspan="2">
</td>
</tr>
<tr>
<td class="auto-style7" colspan="2"></td>
<td class="auto-style4" colspan="2">
</td>
</tr>
<tr>
<td class="auto-style6" colspan="2" rowspan="4"> </td>
<td class="auto-style3" colspan="2">
</td>
<td rowspan="4"> </td>
</tr>
<tr>
<td class="auto-style3" colspan="2">
</td>
</tr>
<tr>
<td class="auto-style3" colspan="2">
</td>
</tr>
<tr>
<td class="auto-style3" colspan="2">
</td>
</tr>
<tr>
<td class="auto-style7" colspan="2"></td>
<td class="auto-style4" colspan="2"> </td>
<td class="auto-style5"></td>
</tr>
</tr>
<tr>
<td class="auto-style6" colspan="2"> </td>
<td class="auto-style3" colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style3">
</td>
<td class="auto-style3" colspan="2">
</td>
<td class="auto-style12">
</td>
<td rowspan="6"> </td>
</tr>
<tr>
<td class="auto-style3">
</td>
<td class="auto-style3" colspan="2">
</td>
<td class="auto-style12">
</td>
</tr>
<tr>
<td class="auto-style7">
</td>
<td class="auto-style7" colspan="2">
</td>
<td class="auto-style13">
</td>
</tr>
<tr>
<td class="auto-style3">
</td>
<td class="auto-style3" colspan="2">
</td>
<td class="auto-style12">
</td>
</tr>
<tr>
<td class="auto-style3">
</td>
<td class="auto-style3" colspan="2">
</td>
<td class="auto-style12">
</td>
</tr>
<tr>
<td class="auto-style3" colspan="5">
<hr />
</td>
</tr>
</table>
<td>
</td>
</table>
</div>
</div>
<div>
</div>
</form>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
看到代码（在此处发布）后，不确定在Layout.css文件中写了什么。在这里，我只能假设它可能正在发生，因为在类.nvbar中设置了float:left属性。通过使用clearfix属性，布局将被修复，而不会在右侧浮动。请参阅 DEMO 。
以下是您需要在CSS文件中添加的clearfix CSS方法。
.nvbar:after{
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}