html – 隐藏显示表和溢出

概述我正在制作Img悬停的乐趣.但是现在我的div中有一些文字.我用过代码： display: table-cell;vertical-align: middle; 让文本以我的div为中心.我也有这个代码： .vertical-smallborder{ position: relative; width: 217px; height: 350px; border: 我正在制作img悬停的乐趣.但是现在我的div中有一些文字.我用过代码：

display: table-cell;vertical-align: mIDdle;

让文本以我的div为中心.我也有这个代码：

.vertical-smallborder{    position: relative;    wIDth: 217px;    height: 350px;    border: 5px solID white;    outline: 1px solID #c8c8c8;    float:left;    display: table;    -webkit-Transition: all .3s;    -moz-Transition: all .3s;    -ms-Transition: all .3s;    -o-Transition: all .3s;    Transition: all .3s;    overflow: hIDden;}

我得到了显示：那边的文字表.如果我删除它,文本将不会在div中居中.

现在我遇到溢出问题：隐藏.在firefox和IE溢出：隐藏不再工作,如果有display：table.

谷歌浏览器和Safari都支持显示：表格和溢出：隐藏在一起.

注意：它必须是纯CSS.所以我不能使用任何JavaScript.

谢谢

解决方法 对于firefox – 概念验证

我创建了一个演示如下：

<div >    <img src="http://placekitten.com/400/500"  />    <div >        <div >        <h1>Overhemd<br/>24,95</h1>        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>        </div>    </div></div>

并使用以下CSS：

.image-clipper {    wIDth: 250px;    height: 300px;    border: 5px solID red;    overflow: hIDden;    position: relative;}.image-clipper .text-panel {    position: absolute;    top: 0;    left: 0;    display: table;    height: 100%;}.image-clipper .text-cell {    display: table-cell;    vertical-align: mIDdle;    padding: 20px; /* works okay */    background-color: rgba(255,255,0.5); /* applIEd to entire cell */}

我能够在父元素中剪切图像,并根据需要定位表/表格单元格.

见demo：http://jsfiddle.net/audetwebdesign/JpMXP/

后记

我没有时间深入审查您的样式表或调查表/表格单元格如何与overflow：hIDden进行交互的完整细节.但是,这种方法似乎有效并且相对容易理解.

总结

以上是内存溢出为你收集整理的html – 隐藏显示表和溢出全部内容，希望文章能够帮你解决html – 隐藏显示表和溢出所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。