废话不说,有以下的HTML+CSS代码,在IE8\FF\CHROME下都是正常的显示,在IE6\7下会出现重叠现象,希望有朋友能告知原因并给出解决方案:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>阿里题1</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#container{
position:relative;
margin: 200px auto;
width:300px;
height:300px;
}
.hoverEnlarge {
background: #CDD8DA;
}
.leftTopColumn {
position: absolute;
/* left: 0;
top: 0;*/
width: 90px;
height: 150px;
z-index: 999;
}
.leftBottomColumn {
position: absolute;
width: 90px;
height: 115px;
margin-top: 157px;
z-index: 998;
}
.rightColumn {
/*position:absolute;
left: 97px;*/
margin-left:97px;
width: 215px;
height: 270px;
}
</style>
</head>
<body>
<div id="container">
<div class="leftTopColumn hoverEnlarge"></div>
<div class="leftBottomColumn hoverEnlarge"></div>
<div class="rightColumn hoverEnlarge"></div>
</div>
</body>
</html>想实现一个整体两列, 左列又分上下两栏的布局。
<html>
<head>
<title>阿里题1</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#container{
position:relative;
margin: 200px auto;
width:300px;
height:300px;
}
.hoverEnlarge {
background: #CDD8DA;
}
.leftTopColumn {
position: absolute;
/* left: 0;
top: 0;*/
width: 90px;
height: 150px;
z-index: 999;
}
.leftBottomColumn {
position: absolute;
width: 90px;
height: 115px;
margin-top: 157px;
z-index: 998;
}
.rightColumn {
/*position:absolute;
left: 97px;*/
margin-left:97px;
width: 215px;
height: 270px;
}
</style>
</head>
<body>
<div id="container">
<div class="leftTopColumn hoverEnlarge"></div>
<div class="leftBottomColumn hoverEnlarge"></div>
<div class="rightColumn hoverEnlarge"></div>
</div>
</body>
</html>想实现一个整体两列, 左列又分上下两栏的布局。
解决方案 »
- javascript的一点问题
- ext中tab切换导致swf所注册的方法丢失?
- 用jquery的addclass,当鼠标移到li上给li增加样式,请帮忙
- ASP.NET Repeater 实现子窗体传值到父窗体 在线等待。。。
- ValidForm表单验证如何和JqueryUI,DatePicker结合用??
- 一个有关时钟的问题,既可以用鼠标拖动表盘上的分针或者时针,得到时间,也可以通过输入时间来对时针和分针进行定位
- 请问 function除了会写在js和jsp里面还有可能在那里
- 如何做字幕滚动效果?
- 双击浏览器后,页面开始滚动事怎么实现的?
- 怎样通过动态改变CSS位置属性的方法设计一个实现简单动画的Javaseript程序?To:[email protected]
- js或jquery读取json
- 如何通过Extjs来获取Session对象
position:relative;
margin: 200px auto;
width:300px;
height:300px;
}
margin:200px auto; 这句去掉就可以了= =~~!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>阿里题1</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#container{
margin: 200px auto;
width:300px;
height:300px;
}
.hoverEnlarge {
background: #CDD8DA;
}
.leftTopColumn {
position: absolute;
width: 90px;
height: 150px;
z-index: 999;
}
.leftBottomColumn {
position: absolute;
width: 90px;
height: 115px;
margin-top: 157px;
z-index: 998;
}
.rightColumn {
position:absolute;
margin-left:97px;
width: 215px;
height: 270px;
}
</style>
</head>
<body>
<div id="container">
<div class="leftTopColumn hoverEnlarge"></div>
<div class="leftBottomColumn hoverEnlarge"></div>
<div class="rightColumn hoverEnlarge"></div>
</div>
</body>
</html>