|
|
CHROME浏览器下overflow属性值hidden失效的问题 |
作者:洛羽叶 点击率:4385 发布时间:2012-05-28 |
CHROME浏览器下overflow属性在表格固定高度的情况下,如果内容超出高度将会出现溢出的现象,IE、Opera等浏览器下不会出现此问题,推断是一个BUG。代码如下:
<table width="100%" height="300" style="table-layout:fixed;word-break:break-all;word-wrap:break-word;overflow:hidden;">
采用 position:relative情况依旧。
根据网站的实际情况,高度可以扩展,所以去掉height="300"标记,问题解决。
参考1:WebKit 内核浏览器中,当使用脚本对拥有 'float' 特性以及 'overflow' 特性值不为 'visible' 特性的布局进行变更盒模型操作后,Chrome Safari 的 Reflow 计算会出现偏差,导致之后的 Repaint 操作时,无法渲染出布局内容。
参考2:对于overflow:hidden的最大误解时:当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时,其内部的任何溢出的内容都将被剪裁(隐藏)。 但事实确实如此吗?答案是“未必”!事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏,具体来说,需要同时满足以下条件:
1.拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式;
2.内部溢出的元素是通过position:absolute绝对定位;
参考3:属性(overflow)规定,当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它(此属性)影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区(通常指浏览器内容可视区域,可以理解为body元素)或者是该容器(定义了overflow的元素)的父级元素时,则不受影响。
|
|
|
|
|