在 Chrome 中使用多列布局中断的覆盖 div

Question

我正在构建一个水平多列布局，只使用html和css，我试图向盒子添加一个叠加渐变div，但我正面临一个奇怪的问题： Overlay div 在 FF/IE11/Edge/Safari 中的所有块上看起来都很好，但 仅从右上角块 chrome 中消失。

Chrome Preview

HTML/CSS 代码：

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.wrapper { width:90%; max-width:1130px;  margin:auto; padding:3em 0; }

.masonry, .inner {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
    -moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}

.masonry article.brick { width:100%;  height:300px; }
.inner article { width:100%; height:150px; }

.masonry article { margin-bottom: 30px; border:1px solid red; }

.masonry article { position:relative;  } .masonry article a { color:red; }
.masonry article h3 { position:absolute;  bottom:30px; margin-left: auto; margin-right: auto; left: 0;right: 0; width:90%;  z-index:5; }
.masonry .inner article h3 { bottom:0px;}

.overlay{ width:100%; height:100%; position:absolute; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); opacity:0.9; z-index:3; transition: all .3s; }

<div class="wrapper">
	<div class="masonry">
		
		<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
				
		<div class="inner">
			<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
			<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
			<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
			<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
		</div>
			
		<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
			
	</div>
</div>

codePen：http://codepen.io/anon/pen/wgegxp

Answer 1

很奇怪，我倾向于这是一个错误。但是，作为修复，不要使用opacity。设置渐变本身的不透明度以使其淡化。

似乎与您格式化.inner 的方式以及您对列的使用有关。

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.wrapper { width:90%; max-width:1130px;  margin:auto; padding:3em 0; }

.masonry, .inner {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
    -moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}

.masonry article.brick { width:100%;  height:300px; }
.inner article { width:100%; height:150px; }

.masonry article { margin-bottom: 30px; border:1px solid red; }

.masonry article { position:relative;  } .masonry article a { color:red; }
.masonry article h3 { position:absolute;  bottom:30px; margin-left: auto; margin-right: auto; left: 0;right: 0; width:90%;  z-index:5; }
.masonry .inner article h3 { bottom:0px;}

.overlay{ width:100%; height:100%; position:absolute; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9)); z-index:3; transition: all .3s; }

<div class="wrapper">
		<div class="masonry">
		
			<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
				
			<div class="inner">
				<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
				<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
				<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
				<article><a href="#"><h3>Post Title - Sub</h3><div class="overlay"></div></a></article>
			</div>
			
			<article class="brick"><a href="#"><h3>Post Title - Big</h3><div class="overlay"></div></a></article>
			
		</div>
	</div>