我一直在努力解决这个问题。我发现这两个主题似乎有同样的问题。但我无法用它们中提到的技巧来解决它。
1px white spacing in Chrome between div's
overflow: hidden is causing white border with css transition
当我将Css过渡应用于代码时，这些小的白色边框开始出现在某些div上。它们仅出现在某些窗口大小中。我无法摆脱它们。谁能帮帮我吗？我试图把所有东西从溢出：隐藏; to -webkit-backface-visibility：hidden;在css的不同地方。但没有任何效果，我不确定在哪里放置它。
这是白色边框问题的样子： SCREENPRINT
整个文件是很多代码，我不想拥挤这个页面所以完整的代码在这里：http://jsfiddle.net/oocwfery/1/
我只将HTML和CSS部分放在我认为问题可能存在的地方。如果您在jsfiddle链接中需要整个代码。我还评论了在代码中应用转换的位置。在jsfiddle的代码中有很多类似的转换部分，但在这里发布它会是令人讨厌的吗？
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*----------------------------------
GRID
----------------------------------*/
.all-content{
width: 100vw;
height: 100vh;
}
ul{
list-style: none;
margin: 0;
padding: 0;
border: 0;
display: inline-block;
}
li {
position: relative;
}
.squares {
opacity: 0;
}
.grid.visible .squares {
opacity: 1;
}
.squares > li.hidden{
opacity: 0.2;
}
.sq {
float: left;
width: 100vw;
height: 100vw;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
.sq1 {
background: #06465b;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.sq1:before {
background-size: auto 100%;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../img/kim.jpg");
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sq1:hover, .sq1:focus, .sq1:active {
color: white;
}
.sq1:hover:before, .sq1:focus:before, .sq1:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.sq:hover h1,
.sq:hover h2,
.sq:hover h3,
.sq:hover img{
opacity: 1;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
img {
opacity: 0;
transition: opacity .2s linear, border-radius 1s ease-in 1s;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
h1,
h2,
h3 {
opacity: 0;
margin: 0;
padding: 0;
border: 0;
transition: opacity .2s linear, border-radius 1s ease-in 1s;
}
.sq {
width: 33.3333333vw;
height: 33.3333333vw;
}
HTML（由于某些原因，车把代码的某些部分并不想出现在这里，但我认为这些部分并不重要。）
<body>
<div class="all-content type">
<!-- Gridsystem, data pulled from Json. -->
<div class="grid page">
<section class="clearfix">
<ul class="squares">
<script id="projects-template" type="text/x-handlebars-template">
<li data-index="{{id}}" class="{{sqid}}">
<img src="{{logo}}">
<h3><mark style="background-color: #FFFFFF">{{year}}</mark><br/></h3>
<h1><mark style="background-color: #FFFFFF">{{name}}</mark><br/></h1>
<h2><mark style="background-color: #FFFFFF">{{type}}</mark></h2>
</li>
</script>
</ul>
</section>
</div>
<!-- Every project has its own page that is hidden, is made visible when clicked on in grid system. -->
<div class="single-project page">
<div class="overlay"></div>
<div class="popup-detail">
<h1><mark style="background-color: #FFFFFF">Single project view</mark></h1>
<h4><mark style="background-color: #FFFFFF">Blurb placeholder</mark></h4>
<span class="close">×</span>
</div>
</div>
<div class="error page">
<h3>Something went wrong and I'm not sure why.. :o</h3>
</div>
</div>
对于任何帮助都会永远是伟大的。