Phi*_*hil 11 css cross-browser
如果这是一个老问题或已知问题,我很抱歉,但我无法在网上找到答案.如果我有代码
<style>
html, body { height: 100%; width: 100%;}
#div1 {height:50%; min-height:200px;background-color:red;}
#div2 {height:100%; background-color:black;}
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
然后在firefox中,黑色内部div在屏幕收缩时缩小并停在200px高度.然而,在webkit浏览器中,红色外部div停止但内部div继续缩小,就像它在没有min-height属性的父div中一样.
是否有一个简单的方法可以使webkit版本与firefox渲染一致？一个min-height:inherit如果放在内部的div,但在一个范围内的诸多的div的情况下,这需要工程min-height:inherit上的每个孩子股利.还有更优雅的解决方案吗？
bob*_*nce 23
是的,这是一个WebKit错误,错误26559.
heightin %静态或相对定位元素是相对于包含块的声明height属性计算的,而不是计算的高度考虑min-height和max-height计算.宽度不会发生同样的情况.
你可以在CSS 2.1中看到它的来源,它指出必须明确设置包含块的高度%才能工作.但是没有明确说明"明确"意味着什么!浏览器认为这个height属性必须设置为非自动值,这是公平的,除非height现在不是所有的高度.其他浏览器允许min-height/ max-height影响要使用的高度,但不允许它表示"显式".WebKit通过仅 height在calcation而不是min/max中使用得更远(并且这绝对不是规范要求).
作为一种解决方法,您可以尝试绝对定位,这不会受到影响.外部div的相对位置,内部的绝对位置left: 0; top: 0; width: 100%; height: 100%.