/ 昌里大金猪的空间 / 高度自适应与 Opera's 32767 Bug

高度自适应与 Opera's 32767 Bug

2011-03-29 posted in [frontend]

相册首页整个右栏模块是高度自适应的,实现手段无非就是采用超大负margin+超大正padding相结合,并将溢出部分隐藏:
父容器:
高度自适应与Operas 32767 Bug - nomospace(昌里大金猪) - Nomospace
右栏:
 高度自适应与Operas 32767 Bug - nomospace(昌里大金猪) - Nomospace
在所有浏览器上都能表现良好,唯独在opera下出现了超长的滚动条,如图:
高度自适应与Operas 32767 Bug - nomospace(昌里大金猪) - Nomospace

其实,产生滚动条的根本原因可能是opera下overflow:hidden的bug,解决方案如下:
@media all and (min-width:0) {.j-r{padding-bottom:0;margin-bottom:0;}}

当然,本文重点也不在如何解决这个bug上。实际上,如果给元素赋予一个超大值(比如9999em),opera下的样式会被解析成:
高度自适应与Operas 32767 Bug - nomospace(昌里大金猪) - Nomospace

32767是2的15次方减一,刚好是16位整型数字的最大值,看起来opera无法处理大于32767px的高度/宽度。
Opera CSS Integer bug
其实老外早就发现过类似问题了,解决方案如下:

参考资料: