出于某种原因,在 Chrome 上,我在“top”和“bod”之间有一条“石灰”色的 1px
线。当我删除 overflow
css 指令时,该行就消失了。
我只能在 Chrome 中看到“lime”行,而在 Firefox 中看不到。
代码如下:https://jsfiddle.net/m36yk1o9/5/
#chatApplicationClassic {
padding: 0;
margin: 0;
border: 0;
position: fixed;
bottom: 0px;
right: 30px;
width: 300px;
background-color: lime;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 5px #000000;
}
#chatHeaderClassic {
padding: 0;
margin: 0;
border: 0;
width: 100%;
background-color: pink;
cursor: pointer;
border-radius: 5px 5px 0 0;
border-top: 0px solid red;
border-left: 0px solid red;
border-right: 0px solid red;
border-bottom: 0px solid red;
box-sizing: border-box;
}
#chatHeaderTextClassic {
padding: 0;
margin: 0;
border: 0;
color: #ffff33;
font-family: 'Open Sans', sans-serif;
padding: 6px;
font-size: 18px;
font-weight: 100;
display: inline-block;
border-radius: 5px 5px 0 0;
}
#chatHeaderArrowClassic {
padding: 0;
margin: 0;
border: 0;
color: #9900ff;
display: inline-block;
float: right;
padding: 6px;
font-size: 18px;
}
#chatBodyClassic {
padding: 0;
margin: 0;
border: 0;
background-color: white;
border-left: 5px solid pink;
border-right: 5px solid pink;
height: 200px;
width: 100%;
box-sizing: border-box;
padding-top: 10px;
overflow: scroll;
}
.chatAgentBubbleClassic {
padding: 0;
margin: 0;
border: 0;
background-color: #664eff;
margin-right: 40px;
margin-top: 10px;
box-sizing: border-box;
border-radius: 4px;
}
.chatVisitorBubbleClassic {
padding: 0;
margin: 0;
border: 0;
background-color: #6600ff;
margin-left: 40px;
margin-top: 10px;
box-sizing: border-box;
border-radius: 4px;
}
.chatAgentBubbleTextClassic {
font-size: 12px;
padding: 8px;
font-family: sans-serif;
color: lightblue;
}
.chatVisitorBubbleTextClassic {
font-size: 12px;
padding: 6px;
font-family: sans-serif;
color: skyblue;
}
<div id="chatApplicationClassic">
<div id="chatHeaderClassic">
<div id="chatHeaderArrowClassic">
Arr
</div>
<div id="chatHeaderTextClassic">
Top
</div>
</div>
<div id="chatBodyClassic">
bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br />
</div>
<!--
<div id="chatFooterClassic">
<div id="chatInputContainerClassic">
<input placeholder="type here..." id="chatInputClassic" type="text" />
</div>
<div id="chatSendButton">
<div id="chatSendButtonText">Send</div>
</div>
</div>-->
</div>
最佳答案
它可能来自 header 中的两个子元素。 padding
使其中一个盒子比容器高, float
在那里设置它会导致溢出,因为你没有在那里设置任何clearfix。
但是既然你有float:right
设置为“顶部”,只需设置 float:left
在“Arr”上,并通过添加 overflow:hidden
来清除 float 在容器上。那条细石灰线将被移除。
<强> Updated jsFiddle
#chatApplicationClassic {
padding: 0;
margin: 0;
border: 0;
position: fixed;
bottom: 0px;
right: 30px;
width: 300px;
background-color: lime;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 5px #000000;
}
#chatHeaderClassic {
padding: 0;
margin: 0;
border: 0;
width: 100%;
background-color: pink;
cursor: pointer;
border-radius: 5px 5px 0 0;
border-top: 0px solid red;
border-left: 0px solid red;
border-right: 0px solid red;
border-bottom: 0px solid red;
box-sizing: border-box;
overflow: hidden; /*added*/
}
#chatHeaderTextClassic {
padding: 0;
margin: 0;
border: 0;
color: #ffff33;
font-family: 'Open Sans', sans-serif;
padding: 6px;
font-size: 18px;
font-weight: 100;
/* display: inline-block; */
border-radius: 5px 5px 0 0;
float: left; /*added*/
}
#chatHeaderArrowClassic {
padding: 0;
margin: 0;
border: 0;
color: #9900ff;
/* display: inline-block; */
float: right;
padding: 6px;
font-size: 18px;
}
#chatBodyClassic {
padding: 0;
margin: 0;
border: 0;
background-color: white;
border-left: 5px solid pink;
border-right: 5px solid pink;
height: 200px;
width: 100%;
box-sizing: border-box;
padding-top: 10px;
overflow: scroll;
}
.chatAgentBubbleClassic {
padding: 0;
margin: 0;
border: 0;
background-color: #664eff;
margin-right: 40px;
margin-top: 10px;
box-sizing: border-box;
border-radius: 4px;
}
.chatVisitorBubbleClassic {
padding: 0;
margin: 0;
border: 0;
background-color: #6600ff;
margin-left: 40px;
margin-top: 10px;
box-sizing: border-box;
border-radius: 4px;
}
.chatAgentBubbleTextClassic {
font-size: 12px;
padding: 8px;
font-family: sans-serif;
color: lightblue;
}
.chatVisitorBubbleTextClassic {
font-size: 12px;
padding: 6px;
font-family: sans-serif;
color: skyblue;
}
<div id="chatApplicationClassic">
<div id="chatHeaderClassic">
<div id="chatHeaderArrowClassic">
Arr
</div>
<div id="chatHeaderTextClassic">
Top
</div>
</div>
<div id="chatBodyClassic">
bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br /> bod
<br />
</div>
<!--
<div id="chatFooterClassic">
<div id="chatInputContainerClassic">
<input placeholder="type here..." id="chatInputClassic" type="text" />
</div>
<div id="chatSendButton">
<div id="chatSendButtonText">Send</div>
</div>
</div>-->
</div>
关于css - 为什么这些 div 之间有垂直间隙?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35276213/