overflow:auto 的情况下,position:relative 的兼容性的问题
2010-04-09 15:35
465 查看
虽然,理论是可以一套又一套。但是,到了实战中,总会有些莫名其妙的问题,占用了你大量的时间。像Jquery 这样的框架,可以兼容各种各样的浏览器,
可以非常完美的,简洁的进行编程。但是CSS 的设计没有这样简单,没有通用的解决方案。只能靠平时的点滴积累。
虽然,作为一个开发人员,CSS不要求精通,但是,简单的了解了解还是有必要的。最近,遇到的这个问题很简单,可以用下面的例子来表示。
代码
<!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" />
<style type="text/css">
#container {
height:100px;
border:1px solid blue;
overflow:auto;
width:300px;
}
#a {
height:200px;
background-color:blue;
float:left;
width:60px;
}
#b {
position:relative;
height:200px;
background-color:pink;
width:60px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
你会发现,在ie6 ie7 上,粉色的部分,会超出来。在firefox下面,ie8下面是正常的。
解决的方案和很简单:
在overflow 所在的div 里面,加一个 position:relative; 就可以了。
可以非常完美的,简洁的进行编程。但是CSS 的设计没有这样简单,没有通用的解决方案。只能靠平时的点滴积累。
虽然,作为一个开发人员,CSS不要求精通,但是,简单的了解了解还是有必要的。最近,遇到的这个问题很简单,可以用下面的例子来表示。
代码
<!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" />
<style type="text/css">
#container {
height:100px;
border:1px solid blue;
overflow:auto;
width:300px;
}
#a {
height:200px;
background-color:blue;
float:left;
width:60px;
}
#b {
position:relative;
height:200px;
background-color:pink;
width:60px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
你会发现,在ie6 ie7 上,粉色的部分,会超出来。在firefox下面,ie8下面是正常的。
解决的方案和很简单:
在overflow 所在的div 里面,加一个 position:relative; 就可以了。
相关文章推荐
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
- css中position:relative和overflow:hidden的问题
- css中position:relative和overflow:hidden的问题
- css中position:relative和overflow:hidden的问题
- css中position:relative和overflow:hidden的问题
- IE6Bug,外层container设置了overflow:auto,但是内层嵌套元素有position:relative的时候,显示错误。
- IE7下position:relative与overflow的问题
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
- IE7下POSITION:RELATIVE与OVERFLOW的问题
- css中position:relative和overflow:hidden之间的问题
- IE6的overflowauto的不显示滚动条问题
- css定位position,absolute relative两种情况下,top,left,right,bottom的区别
- CSS中margin和position:relative的定位问题
- Overflow:auto解决scoll 问题
- position:absolute与overflow:hidden,解决子元素设置position:absolute后父元素 overflow:hidden无效的问题
- position: absolute、relative的问题