Question

这是我的代码：

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  -o-border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -ms-border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  -o-box-shadow: 0px 0px 6px #ccc;
  -moz-box-shadow: 0px 0px 6px #ccc;
  -webkit-box-shadow: 0px 0px 6px #ccc;
  -ms-box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  height:100%;
  max-height:55%;
  min-height:180px;	
  right: 53px;
  top: 65px;
  /* overflow:hidden; */
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -o-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -moz-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -webkit-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  -ms-box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  content: "\00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}

.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}

<div class="user_inbox">
  <span class="title">there is a title</span>
</div>

现在请删除该行周围的评论：overflow:hidden; （我的意思是请让该行取消注释） ..然后突然上箭头将消失。

好吧，我需要那个向上箭头和这个属性overflow:hidden;。我该怎么处理？

Answer 1

overflow:hidden是一个游戏结束，因为一个子元素试图弹出它的父溢出边界而是创建一个将溢出（隐藏）

的内部容器

.overflow{
  position: relative;
  overflow:hidden;
  height: inherit;
  width: inherit;
  background: #cf5;
}

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  height:100%;
  max-height:55%;
  min-height:180px;	
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "\00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}

.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}

<div class="user_inbox">
  <div class="overflow">
    <span class="title">there is a title</span>
  </div>
</div>

或“底部”（标题下方）;

.overflow{
  position: relative;
  overflow:hidden;
  width: inherit;
  background: #cf5;
  max-height:55%;
  min-height:180px;	
}

.user_inbox{
  position:absolute;
  background-color: #fff;
  border-radius:2px;
  box-shadow: 0px 0px 6px #ccc;
  width:  310px;
  direction:ltr;
  left:53px;
  top:63px;
  border:1px solid #CCC;
  z-index:5000;
  /*height:100%;
  max-height:55%;
  min-height:180px;	*/
  right: 53px;
  top: 65px;
}
.user_inbox:after{
  background-color: #fff;
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, 0.4 );
  content: "\00a0";
  display: block;
  height: 12px;
  width:  12px;
  margin-left:18px;
  position:absolute;
  top:-5px;
  transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  background-color: #F7F7F7;
  right: 18px;
}

.title{
  background-color: #F7F7F7;
  display:block;
  width; 100%;
  height: 20px;
  text-align: center;
  padding: 5px;
}

<div class="user_inbox">
  <span class="title">there is a title</span>
  <div class="overflow"></div>
</div>

为什么当我将overflow属性设置为hidden时，伪元素会消失？

1 个答案: