您的位置：首页 > Web前端 > CSS

overflow失效的一种情况

2016-03-28 15:21 316 查看

* 在实际开发中，遇到一种情况，在chrome浏览器环境中，overflow：hidden失效，网上查找了一下，没有发现相同的情况，因此分享出来，供大家参考*

鼠标移入左侧的图片时，右侧overflow：hidden失效。

很奇怪的一个问题，因为左侧的图片hover与右侧没有关系。但是右侧就会出现

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>overflow失效的一种情况</title>

<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 1110px;
margin: 0 auto;
}
.clearfix:after{
clear: both;
display: block;
content: '';
}
.clearfix{
zoom: 1;
}
.fl{
float: left;
}
.wrap .left{
width:210px; height:140px;
overflow: hidden;
}
.wrap .left img{
width:210px; height:140px;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.wrap .left img:hover {
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
}

.billboard-left{
width: 64px;
height: 64px;
border: 2px solid #e9e9e9;
border-radius: 32px;
overflow: hidden;
position: relative;
margin-left: 100px;

}
.billboard-left div{

width: 64px;
height: 64px;
border-radius: 32px;
display: block;
overflow: hidden;
position: relative;

}
.billboard-left span{
position: absolute;
bottom: 0;
left: 0;
background: #000;
opacity: 0.5;
filter:alpha(opacity=50);
width: 100%;
height: 20px;

}
.billboard-left p{

font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 64px;
height: 20px;

color: #fff;

overflow: hidden;
}
.billboard-left img{
width: 100%;
border-radius: 32px;
}
</style>
</head>
<body>
<div class="wrap clearfix">

<div class="left fl">
<img src="http://www.d1ev.com/d/file/contents/2016/03/56f8888645468.jpg" />
</div>
<div class="billboard-left fl">
<div>
<img src="http://www.d1ev.com/index.php?g=api&m=avatar&uid=4608&size=45" alt="">
<span class="billboard-left-span"></span>
<p>128篇</p>
</div>
</div>
</div>
</body>
</html>

解决办法

尝试了许多方法，下面的最简单

.billboard-left div {
z-index:1;
}

疑问部分

1、不知道为什么会出现这种情况。哪位同学如果知道，谢谢说明一下。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chrome css问题

相关文章推荐

新的分享

章节导航