css布局IE6错乱，FF不会，请问原因
0
悬赏园豆：15
[已关闭问题]
关闭于 2008-09-10 22:36
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test003.aspx.cs" Inherits="TerminalServer.Test003" %>
<!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" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
width:100%;
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
<br />
Port side text..<br />
Port side text..<br />
Port side text..Port side text..<br />
Port side text..<br />
Port side text..<br />
Port side text..<br />
Port side text..<br />
Port side text..</div>
<%--<div id="right">
Starboard side text...
<br />
Starboard side text..<br />
Starboard side text..<br />
Starboard side text..Starboard side text..<br />
Starboard side text..<br />
Starboard side text..<br />
Starboard side text..<br />
Starboard side text..<br />
Starboard side text..Starboard side text..Starboard side text..<br />
Starboard side text..</div>--%>
<div id="middle">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="ProductID" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
<asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
<asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
<asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</div>
<div id="footer">
Footer text...
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:N%>"
SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>
</form>
</body>
</html>
orthwindConnectionString
firefox下显示正确，但是IE6却错乱了，请问什么原因
所有回答(4)
0
各浏览器对css解析方式不同,故而会导致浏览器兼容问题.
具体解决方案你可以先查阅 CssHack , 更多的还是实际工作中经验问题.
不过html以及css写规范了,出现不兼容的情况是不会太多的!
0
没有IE6没办法测试，IE7没有问题
应该是那个middle的宽度有问题，100%的话，如果加了margin就会出问题，试着定义middle的margin为0，或者减小一下middle的宽度，不行就再加个float，应该没有问题
0
哈哈，也有人出现了我以前一样头疼的问题哦
把
div#middle {
width:100%;
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
这个宽度弄下
width设置下，（应该可以弄好的）
或则是弄下margin:10px 0 0 1px;（距上,右,下,左多少像素,）
0
只看了图片，猜测：
父容器宽度不够，ff和ie解释的盒模型方式不一样
