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

这似乎是一个浏览器错误。

例如，一个宽度为5px的元素，在1.5倍变焦下观看时的宽度为7.5px，但浏览器必须将其四舍五入到完全pxls，这样就可以发生这种情况。

为了确保它不会发生，你可以使元素重叠，或者在你的情况下，最好不要将粉红色的背景图像分成2个元素，但是只有一个元素可以携带整个图像。

Chrome不会使用font-resize作为缩放选项，因此这不太可能是由css的特定行引起的。