我多次遇到过这个问题.仍然不知道是什么导致了这一点.
复制:
.l-search-index .top {@第26行border: 1px solid #ff0000;以border: 0;浏览器:chrome,但我想你可以尝试其他任何..
请指教!
它与边距重叠的方式有关,以及某些属性如何强制它们被包含.如果在页面上放置2x div,两者的边距均为100px,则这些div之间的间距将为100px.不是200px.这是因为允许边距与其他边距重叠.这就是利润的运作方式.那是一件好事.
但是如果你把一个div放在另一个div中,两个都有边距,那么这些边距也会重叠.子元素的边距与父元素重叠.
但是,正如您所发现的,某些属性 - 边框,还有填充和溢出 - 强制父级包含其子级的边距而不是重叠它们.
我相信有人可以提供更多的技术解释,但这就是我如何思考正在发生的事情.
这是一个简化的测试用例:http://jsbin.com/ukodus/2/
删除//之前的任何CSS行以查看效果.
"这种行为称为边缘崩溃.只有顶部/底部边距会崩溃,而不是左/右." - @cimmanon
这是折叠边距的一个非常不直观的情况:
CSS规范的第8.3.1节解释了如何处理边距以及它们在何种情况下崩溃.规则不太容易理解(有几个特殊情况),但我引用了规范的相关部分:
在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.
当且仅当以下情况时,两个边距相邻:没有线框,没有间隙,没有填充,没有边界将它们分开
(我强调)
因此,只要删除边框,元素的垂直边距就会崩溃.由于您的利润率为负,因此您的情况会有点复杂.
要解决此问题,您可以设置overflow属性或padding:1px对.top元素应用.
| 归档时间： |
|
| 查看次数： |
1555 次 |
| 最近记录： |