拿这个:http://jsfiddle.net/zVscL/4/
.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}
在Chrome上打开页面,然后在Firefox上打开.蓝色div不继承
有没有解释为什么会这样?任何修复?纯HTML / CSS解决方案更可取.
我一直在这个狗屎几个小时试图让CSS表现出来,当我终于做FF时这样做.吃掉我的开发时间.
最佳答案
尝试将tr和td的高度设置为100%:
tr,td { height: 100%; }
一般来说,要获得高度:100%才能正常工作,必须同时设置元素父母的所有高度.
编辑:
另一种解决方案是用容器div包装td的内容并使用绝对定位来确保.edit-me div有效地具有100%的高度.
以下是HTML的外观:
和CSS:
.container {
position: relative;
padding-left: 10px;
}
.edit-me {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width:10px;
border:1px solid blue;
background:red;
overflow: auto;
}
希望这可以帮助!
原文链接:https://www.f2er.com/html/426430.html
猜你在找的HTML相关文章