我的这段代码在IE里显示是我感觉正常的模样,在chrome里就是不正常的样子,很着急啊,在线等。代码如下
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*ul
{
position:absolute;
left:auto;
}*/
a
{
text-decoration:none;
color:#FFFFFF;
font-size:15px;
font-family:"微软雅黑";
}
.box
{
padding:10px 40px 5px 40px;
}
.body
{
background:#999999;
width:800px;
height:1600px;
margin:0px auto;
padding-top:1px;
}
.banner
{
/*opacity:0.6;
filter:alpha(opacity=60);
filter: "alpha(opacity=60)";
zoom=1;
*/
background:#FF9933;
width:780px;
height:200px;
margin:10px auto 0px auto;
}
#navigation
{
background:#FF3333;
width:780px;
height:40px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}
#navigation ul
{
list-style:none;
}
.fatherlogin
{
background:#999999;
width:150px;
height:600px;
margin:5px 2px 10px 10px;
float:left;
}
.login
{
background:#96C;
width:150px;
height:200px;
margin:0px 0px 5px 0px;
padding:20px 0px 0px 1px;
}
.text
{
background:#CCFF00;
width:625px;
height:600px;
margin:5px 7px 10px 4px;
float:left;
}
.cookie
{
background:#00CCCC;
width:150px;
height:370px;
margin:5px 0px 5px 0px;
float:left;
}
.bottom
{
background:#CCFF00;
width:782px;
height:400px;
padding:0px;
margin:610px 10px 0px 10px;/*chrome*/
margin:0px 10px 0px 10px;/*IE*/
/*opacity:0.75;*/
filter:alpha(opacity=75);
filter: "alpha(opacity=75)";
zoom=1;
}
</style>
</head>
<body>
<div class="body">
<div class="banner"><img src="未标题-1.jpg" width="780" height="200" /> </div>
<div id="navigation">
<ul>
<li style="float:left" class="box"><a href="#">Home</a></li>
<li style="float:left" class="box"><a href="#">Products</a></li>
<li style="float:left" class="box"><a href="#">Technology</a></li>
<li style="float:left" class="box"><a href="#">Pricing</a></li>
<li style="float:left" class="box"><a href="Contact.html">Contact</a></li>
</ul>
</div>
<div class="fatherlogin">
<div class="login">
</div>
<div class="cookie">
</div>
</div>
<div class="text">
</div>
<div class="bottom">
</div>
<div>
</body>
</html>
IE10的截图在此
chrome里是这个鬼样,而且网页缩小,放大那个浮动属性都会有不同的效果。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*ul
{
position:absolute;
left:auto;
}*/
a
{
text-decoration:none;
color:#FFFFFF;
font-size:15px;
font-family:"微软雅黑";
}
.box
{
padding:10px 40px 5px 40px;
}
.body
{
background:#999999;
width:800px;
height:1600px;
margin:0px auto;
padding-top:1px;
}
.banner
{
/*opacity:0.6;
filter:alpha(opacity=60);
filter: "alpha(opacity=60)";
zoom=1;
*/
background:#FF9933;
width:780px;
height:200px;
margin:10px auto 0px auto;
}
#navigation
{
background:#FF3333;
width:780px;
height:40px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
}
#navigation ul
{
list-style:none;
}
.fatherlogin
{
background:#999999;
width:150px;
height:600px;
margin:5px 2px 10px 10px;
float:left;
}
.login
{
background:#96C;
width:150px;
height:200px;
margin:0px 0px 5px 0px;
padding:20px 0px 0px 1px;
}
.text
{
background:#CCFF00;
width:625px;
height:600px;
margin:5px 7px 10px 4px;
float:left;
}
.cookie
{
background:#00CCCC;
width:150px;
height:370px;
margin:5px 0px 5px 0px;
float:left;
}
.bottom
{
background:#CCFF00;
width:782px;
height:400px;
padding:0px;
margin:610px 10px 0px 10px;/*chrome*/
margin:0px 10px 0px 10px;/*IE*/
/*opacity:0.75;*/
filter:alpha(opacity=75);
filter: "alpha(opacity=75)";
zoom=1;
}
</style>
</head>
<body>
<div class="body">
<div class="banner"><img src="未标题-1.jpg" width="780" height="200" /> </div>
<div id="navigation">
<ul>
<li style="float:left" class="box"><a href="#">Home</a></li>
<li style="float:left" class="box"><a href="#">Products</a></li>
<li style="float:left" class="box"><a href="#">Technology</a></li>
<li style="float:left" class="box"><a href="#">Pricing</a></li>
<li style="float:left" class="box"><a href="Contact.html">Contact</a></li>
</ul>
</div>
<div class="fatherlogin">
<div class="login">
</div>
<div class="cookie">
</div>
</div>
<div class="text">
</div>
<div class="bottom">
</div>
<div>
</body>
</html>
IE10的截图在此
chrome里是这个鬼样,而且网页缩小,放大那个浮动属性都会有不同的效果。