html - 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 像素宽，但浏览器必须将其四舍五入为完整像素，这样才会发生这种情况。

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

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