如何在Google Chrome上修正1px边距? [英] How do I fix 1px margin on Google Chrome?
本文介绍了如何在Google Chrome上修正1px边距?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这里是一个示例 http://jsbin.com/oqisuv/
CSS
body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
}
.menu {
width:989px;
margin:auto;
height:100px;
background:#666666;
line-height:100px;
text-align:center;
color:#fff;
}
HTML
<body>
<div class="menu">Hello</div>
</body>
如果您在Google Chrome上查看上面的示例,您将看到 .menu
看起来像有 margin-left:-1px
或 margin-right:1px
。
If you view an example above on Google Chrome you will see the .menu
looks like have a margin-left:-1px
or margin-right:1px
.
在Firefox& IE看起来不错。如何解决此问题?
On Firefox & IE it's look great. How do I fix this one?
推荐答案
@media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
body {
background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
这篇关于如何在Google Chrome上修正1px边距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文