IE6下position解决父元素被撑开的问题

在IE6下面当子元素的宽度/高度大于父元素时, 父元素的宽度/高度就被撑开.IE7以上是不会被撑开的

<style>
.f{width:100px; height:100px; background:#808080}
.s{width:50px; height:150px; background:#4cff00;}
</style>
<div class="f">
    <div class="s"></div>
</div>

为了使IE6和其他的浏览器行为一致,我们可以在子元素中添加postion来解决问题

<style>
.f{width:100px; height:100px; background:#808080; _overflow:hidden;}
.s{width:50px; height:150px; background:#4cff00;_position: relative;}
</style>
<div class="f">
    <div class="s"></div>
</div>
时间: 2024-10-25 15:01:03

IE6下position解决父元素被撑开的问题的相关文章

IE6下position:fixed不支持问题及其解决方案

IE6有诸多奇葩,不支持position:fixed就是其中之一.所以在做一些比如固定在顶部或者底部或者固定元素的效果时需要考虑兼容IE6的这个问题.解决方案是用Ie6的hack. *html {/* 只有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */ } #box { /* 非IE6浏览器使用固定元素 */ position: fixed; top: 0; left: 0

jQuery获取元素上一个、下一个、父元素、子元素

jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

IE6下position:fixed不支持问题及其解决方式

IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html {/* 仅仅有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */ } #box { /* 非IE6浏览器使用固定元素 */ position: fixed; top: 0; lef

IE6 下关于Position:absolute;属性对同级元素的影响问题

今天小码哥做一个专题页面的时候,碰到一个关于IE6下position:absolute:属性对同级元素的margin属性有影响的问题.虽然,作为前端人员,IE6下的Bug问题,始终让人头疼不已.但生活在Zhong国的码民们只能继续忍受. 言归正传,是什么问题呢? 即:假如在一个设有position:relative:相对定位属性的div盒子里,同时放另外两个div块级元素layer2,layer3.layer2设有position:absolute:属性,layer3设有margin:30px

【css】ie6 和 ie7 下 position 与 overflow 的问题

前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删除 position:relative,那么父元素的 overflow:hidden 可以隐藏,具体代码及效果如下: html 代码: <!doctype html> <html lang="en"> <head> <meta charset=&q

子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

方法一: html: <div id="all1"> <div id="left1">1</div> <div id="left2">1</div> <div style=" clear:both; "></div> </div> css: #left1{ float:left;width:200px;} #left2{ float

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

使元素相对于窗口或父元素水平垂直居中的几种方法

如果一个元素具有固定或相对大小,要使其不管如何调整窗口大小或滚动页面,始终位于浏览器窗口中间,可使用如下方法: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><meta charset="utf-8&q

解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

在IE6,IE7下,子元素使用position:relative.父元素使用overflow:auto后,我们预期的是滚动条滚动时,子元素也随着滚动,实际情况是内容不滚动,就感觉你是定位定在那里了. 解决办法是父元素添加position:relative样式