Chrome 1px线错误

Question

我正在制作一个粉丝网站，新闻栏上有非常愚蠢的错误。 缩放页面时，出现1px的线。

这是代码：

<div class="velikibar">
<div id="velikibar_h">
    <div id="naslovbar"><?=$naslov?></div>
</div>
<div id="velikibar_b">
    <div class="paddingvelikibar">
    <?=$sadrzaj?>
    </div>
</div>
<div id="velikibar_f">
    <div id="fblikedugme"><?=$vreme?><br /><div class="fb-like" data-href="http://********.**/article.php?id=<?=$id?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div>
    <div id="komentarbarbox"><a href="article.php?id=<?=$id?>" target="_self">Komentari (<?=$brkomentara?>)</a></div>
</div>

这是CSS（ http://tny.cz/d9fb11db ）：

.velikibar
{
    background-color:transparent;
    width: 652px;
}

#velikibar_h
{
    background-image:url('slike/velikibar_h.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 109px;
    padding: 0;
    margin: 0;
}

#velikibar_b
{
    background-image:url('slike/velikibar_b.png');
    background-repeat: repeat-y;
    width: 652px;
    min-height: 30px;
    padding: 0;
    margin: 0;
}

#velikibar_f
{
    background-image:url('slike/velikibar_f.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 112px;
    padding: 0;
    margin: 0;
}

#velikibar_f2
{
    background-image:url('slike/velikibar_f2.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 112px;
    padding: 0;
    margin: 0;
}

.paddingvelikibar
{
    padding: 5px 35px 5px 30px;
    text-align:justify;
    color: #fff5f9;
}

#fblikedugme
{
    position: absolute;
    margin-left: 35px;
    margin-top: 40px;
    color:#fff5f9;
    line-height: 20px;
}

#komentarbarbox
{
    position: absolute;
    margin-left: 425px;
    margin-top: 65px;
}

#komentarbarbox a, #komentarbarbox a:link, #komentarbarbox a:visited
{
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 0 #6f1c3f;
    color: #fdd2e4; 
    text-decoration:none;
}

#komentarbarbox a:hover, #komentarbarbox a:focus
{
    color: #d61566;
    text-decoration:none;
}

#naslovbar
{
font: 23px/1.4em arial, helvetica;
color: #e1aec4;
padding-top: 50px;
padding-left: 35px;
text-shadow: #FCFCFC 0px 1px 0px;
}

.paddingvelikibar img
{
    background-color: #fff2f7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url("skripte/ie-css3.htc");
    padding: 4px;
}

请帮助我解决此问题。 提前致谢

Answer 1

这似乎是浏览器错误。

例如，一个5像素宽的元素（以1.5缩放比例查看）将为7.5像素宽，但是浏览器必须将其四舍五入为完整的pxls，这样才可能发生。

为确保不会发生这种情况，可以使元素重叠，或者在您的情况下，最好不要将粉红色背景图像分成2个元素，而让单个元素承载整个图像。

Chrome浏览器不使用font-resize作为缩放选项，因此这不太可能是由CSS的特殊线条引起的。