在Chrome之间1px的白色间距 [英] 1px white spacing in Chrome between div's
本文介绍了在Chrome之间1px的白色间距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
JSFiddle：
jQuery（document）.ready（function（）{gridSize（）;}）; jQuery（window）.resize（function（）{gridSize（）;}）; / *返回滚动条宽度* / function getScrollBarWidth （）{var inner = document.createElement（'p'）; inner.style.width =100％; inner.style.height =200px; var outer = document.createElement（'div'）; outer.style.position =absolute; outer.style.top =0px; outer.style.left =0px; outer.style.visibility =hidden; outer.style.width =200px; outer.style.height =150px; outer.style.overflow =隐藏; outer.appendChild（内）; document.body.appendChild（外）; var w1 = inner.offsetWidth; outer.style.overflow ='滚动'; var w2 = inner.offsetWidth; if（w1 == w2）w2 = outer.clientWidth; document.body.removeChild（外）; return（w1 - w2）;}; function gridSize（）{if（$（'。box'）.width（）> 0）{var w = $（window）.width（）; } else {var w = $（window）.width（） - getScrollBarWidth（）; } var h = $（window）.height（）; var thirdw，halfw，halfh，overboxw，overboxh; / *宽度需要为33％，高度需要为50％* / / *全屏尺寸* / thirdw = w / 3; halfh = h / 2; $（'。box'）.css（{width：thirdw，height：halfh}）; / *设置邮箱大小* / overboxw = thirdw - 60; overboxh = halfh - 60; $（'。box .overbox'）。css（{width：overboxw，height：overboxh}）; / *根据比例调整图像大小* / if（thirdw> halfh）{jQuery（'。box img'）。css（{height：halfh +px，width：auto}） ; } else {jQuery（'。box img'）。css（{//height：halfh +px}）; } / * Bottom受到影响：.box：hover .title == 110px（需要根据框的宽度向上移动，因为下面的内容在高度增长）* /}
body {margin：0; padding：0;}。boxWrapper {font-size：0; / * - webkit-backface-visibility：hidden; * /}。box {cursor：pointer; height：400px;位置：相对;溢出：隐藏;宽度：300px;的z-index：400; display：inline-block;}。gradient {background：-moz-linear-gradient（top，rgba（255,255,255,0）0％，rgba（128,128,128,0）50％，rgba（0 ，0,0,0.5）100％）; / * FF3.6 + * / background：-webkit-gradient（线性，左上，左下，停止颜色（0％，rgba（255,255,255,0）），停止颜色（50％，rgba （128,128,128,0）），颜色停止（100％，rgba（0,0,0,0.5）））; / * Chrome，Safari4 + * / background：-webkit-linear-gradient（top，rgba（255,255,255,0）0％，rgba（128,128,128,0）50％，rgba（0,0， 0，0.5）100％）; / * Chrome10 +，Safari5.1 + * / background：-o-linear-gradient（top，rgba（255,255,255,0）0％，rgba（128,128,128,0）50％，rgba（0 ，0,0,0.5）100％）; / * Opera 11.10+ * / background：-ms-linear-gradient（top，rgba（255,255,255,0）0％，rgba（128,128,128,0）50％，rgba（0,0， 0，0.5）100％）; / * IE10 + * /背景：线性梯度（至底部，rgba（255,255,255,0）0％，rgba（128,128,128,0）50％，rgba（0,0,0,0.5） 100％）; / * W3C * / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃00ffffff'，endColorstr ='＃80000000'，GradientType = 0）; / * IE6-9 * / z-index：401;宽度：100％;高度：100％;位置：绝对的;顶部：0; left：0;}。box img {position：absolute;左：0; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓解; z-index：400;}。box .title {position：absolute;底部：20像素;左：25像素;文本转换：大写;的z-index：404;颜色：#FFF;字体大小：30像素; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓出;}。box .title：after {content：'';边距：5px的;显示：块;高度：4PX;宽度：60％;背景：#fff;}。box：hover .title {bottom：110px; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓出;}。box .overbox {background-color：rgba（246，48，62，0.85）; margin：10px; padding：20px;宽度：240px; height：340px;位置：绝对;颜色：#fff; z-index：403; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓解; opacity：0;}。box：hover .overbox {opacity：1; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓出;} .box .overbox .tagline {position：absolute;底部：0; padding-right：20px; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除;过渡：全部300ms缓解; font-size：16px;}。box：hover .overbox .tagline {bottom：20px; -webkit-transition：全部300ms缓解; -moz-transition：全部300ms缓解; -o-transition：全部300ms缓解; -ms-transition：全部300ms解除; transition：所有300ms缓出;}
< div class =boxWrapper>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div>< div class =box> < div class =gradient>< / div> < img src =http://www.webtutorialplus.com/Images/css-effects-image/1.jpgalt =Web Tutorial Plus - Demowidth =300height =400/> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / div>< / div> aaaaaaaaaaaabbbbbbbbbbbccccccccccc
h2_lin>解决方案
像素舍入。如果您生成的宽度为 1000px ，则应在 333.33pxpx 中生成每列 。
然而，不幸的是每个浏览器/版本处理小数像素的方式不同。这里有一个方便的指南： http://cruft.io/posts/percentage-calculations- in-ie /
震惊世界，IE是最糟糕的。如果您在IE中运行它，请确保您的窗口333.66̅px。将不幸地被取整为333.67，并可能最终将第三列截断。
为了做你需要做的事情，你根本不需要JS ：
http://jsfiddle.net/c6cwbjLz / 14 /
< div类= boxWrapper > < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / DIV> < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / DIV> < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / DIV> < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / DIV> < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / DIV> < div class =box gradient> < div class =title>标题< / div> < div class =overbox> < div class =tagline> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras efficitur ex velit，eget pellentesque dui dictum at。< / div> < / DIV> < / div>< / div> aaaaaaaaaaa bbbbbbbbbbb ccccccccccc
我有一个类似的问题，它已经修复一个简单的宽度：33.33％。请注意，在我的情况下，我需要使用JS来计算高度和宽度的其他东西，无法响应。
JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/
Basically, I've been trying to make a full-screen 3x2 grid, and have essentially achieved it, however I'm seeing a tiny 1px vertical line between the 2nd and 3rd columns when I hover over the grid items. Where is this coming from, and how do I get rid of it?
I've read elsewhere that including -webkit-backface-visibility: hidden; can help when using 3D transformations; however I'm not using any 3D transformations. This line does work to a degree, in that it hides the white line on some sizes, but on others it still appears (I assume when it's not quite divisible by 3?). I've commented this line out in the JSFiddle below so you can easily see the white line which appears on hover.
Below is a screenshot of what I'm seeing, in case it's not happening for you. Though so far I've only encountered this problem in Chrome.
JSFiddle: http://jsfiddle.net/lustre/c6cwbjLz/13/
jQuery(document).ready(function () {
gridSize();
});
jQuery(window).resize(function () {
gridSize();
});
/* Returns scrollbar width*/
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
};
function gridSize() {
if ($('.box').width() > 0) {
var w = $(window).width();
} else {
var w = $(window).width() - getScrollBarWidth();
}
var h = $(window).height();
var thirdw, halfw, halfh, overboxw, overboxh;
/* Width needs to be 33%, height needs to be 50% */
/* Full screen sizes */
thirdw = w / 3;
halfh = h / 2;
$('.box').css({
"width": thirdw,
"height": halfh
});
/* Set overbox size */
overboxw = thirdw - 60;
overboxh = halfh - 60;
$('.box .overbox').css({
"width": overboxw,
"height": overboxh
});
/* Resize the images based on the ratio */
if (thirdw > halfh) {
jQuery('.box img').css({
"height": halfh +"px",
"width": "auto"
});
} else {
jQuery('.box img').css({
//"height": halfh +"px"
});
}
/*
Bottom's affected:
.box:hover .title == 110px (needs moving up depending on width of box as content beneath grows in height)
*/
}
body {
margin:0;
padding:0;
}
.boxWrapper {
font-size:0;
/*-webkit-backface-visibility: hidden;*/
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 300px;
z-index:400;
display:inline-block;
}
.gradient {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(128, 128, 128, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#80000000', GradientType=0);
/* IE6-9 */
z-index:401;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
z-index:400;
}
.box .title {
position:absolute;
bottom:20px;
left:25px;
text-transform:uppercase;
z-index:404;
color:#fff;
font-size:30px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .title:after {
content:'';
margin-top:5px;
display:block;
height:4px;
width:60%;
background:#fff;
}
.box:hover .title {
bottom:110px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: rgba(246, 48, 62, 0.85);
margin: 10px;
padding: 20px;
width: 240px;
height: 340px;
position: absolute;
color: #fff;
z-index: 403;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.box:hover .overbox {
opacity: 1;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox .tagline {
position:absolute;
bottom:0;
padding-right: 20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
font-size:16px;
}
.box:hover .overbox .tagline {
bottom:20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
<div class="boxWrapper">
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box">
<div class="gradient"></div>
<img src="http://www.webtutorialplus.com/Images/css-effects-image/1.jpg" alt="Web Tutorial Plus - Demo" width="300" height="400" />
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
</div>
aaaaaaaaaaa
bbbbbbbbbbb
ccccccccccc
解决方案
Pixel rounding. If your width generated is 1000px, each column should be generated at 333.33̅px.
However, each browser/version handles decimal pixels differently unfortunately. Here's a handy guide: http://cruft.io/posts/percentage-calculations-in-ie/
Shock horror that IE is the worst. If you run it in IE, make sure your window is 1001px wide and see how that renders. I expect that your 333.66̅px. will unhappily get rounded up to 333.67, and may end up cutting off the 3rd column.
To do what you need to do, you don't actually need JS at all:
http://jsfiddle.net/c6cwbjLz/14/
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
.boxWrapper {
font-size: 0;
height: 100%;
width: 100%;
/*-webkit-backface-visibility: hidden;*/
}
.gradient {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(128, 128, 128, 0)), color-stop(100%, rgba(0, 0, 0, 0.5)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(128, 128, 128, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#80000000', GradientType=0);
/* IE6-9 */
}
.box {
cursor: pointer;
height: 50%;
position: relative;
overflow: hidden;
width: 33.33%;
z-index: 400;
display: inline-block;
background-image: url("http://www.webtutorialplus.com/Images/css-effects-image/1.jpg");
background-size: cover;
}
.box .title {
position: absolute;
bottom: 20px;
left: 25px;
text-transform: uppercase;
z-index: 404;
color: #fff;
font-size: 30px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .title:after {
content: '';
margin-top: 5px;
display: block;
height: 4px;
width: 60%;
background: #fff;
}
.box:hover .title {
bottom: 110px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: rgba(246, 48, 62, 0.85);
margin: 10px;
padding: 20px;
box-sizing: border-box;
/*make border and padding include in height/width */
width: calc(100% - 20px);
height: calc(100% - 20px);
position: absolute;
color: #fff;
z-index: 403;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.box:hover .overbox {
opacity: 1;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox .tagline {
position: absolute;
bottom: 0;
padding-right: 20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
font-size: 16px;
}
.box:hover .overbox .tagline {
bottom: 20px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
<div class="boxWrapper">
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
<div class="box gradient">
<div class="title">Title</div>
<div class="overbox">
<div class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur ex velit, eget pellentesque dui dictum at.</div>
</div>
</div>
</div>aaaaaaaaaaa bbbbbbbbbbb ccccccccccc
I have had a similar problem which was fixed with a simple width: 33.33%. Note that in my case I needed to use JS to calculate height and widths for something else that couldn't work responsively.
这篇关于在Chrome之间1px的白色间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
