Chrome 1px线错误

问题描述

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

I am making one fan-site and have very stupid bug on news bar. When I zoom the page, 1px line appears.

这是代码:

<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;
}

请帮助我解决此问题.预先感谢

Please help me how to fix this. Thanks in advance

推荐答案

这似乎是浏览器错误.

例如，以1.5缩放查看的5像素宽的元素将为7.5像素宽，但是浏览器必须将其四舍五入为完整的pxls，以便发生这种情况.

For example, an element which is 5px wide, viewed on 1.5 zoom would be 7.5px wide, but the browser has to round it to full pxls so something like this can happen.

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

To make sure it doesnt happen you can make the elements overlap, or in your case, best would be not to split the pink background image in 2 elements, but have a single element carry the whole image.

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

Chrome doesnt use font-resize as zoom option, so it is very unlikely that this is caused by a particullar line of css.

这篇关于Chrome 1px线错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！