Firefox和Chrome之间的1个像素差异 [英] 1 pixel difference between Firefox and Chrome

问题描述

我已经写了一个简单的HTML。

 < div class =button>按钮< div> 
  

这行的这个css是

  .button {
 background-color：＃F1631F; 
 position：absolute; 
 bottom：10px; 
 left：20px; 
} 
  

但firefox和chrome之间有一个像素差异。 b
$ b

有没有解决这个问题的好方法？

顺便提一下，我已经添加了

  * {margin：0;填充：0; border：0;} 
  

在我的css文件的开始处。

父母html和css：

 < div class =item> 
< div class =button>< / div> 
< / div> 
 
 .item {
 margin-top：25px; 
 text-align：right; 
 
  

解决方案

添加

  overflow：visible; 
  

添加到父项中。

需要花一些时间来找到适合你的界面的高度。

I have written a simple html.

<div class="button">button<div>

and this css of this line is

.button {
    background-color: #F1631F;
    position: absolute;
    bottom: 10px;
    left: 20px;
}

But there is one pixel difference between firefox and chrome.

left is chrome, right one is firefox. My button is the orange one.

Is there any good solution to solve this?

BTW, I have add

* {  margin: 0; padding: 0; border: 0;}

at the beginnning of my css file.

Parent html and css:

<div class="item">
    <div class="button"></div>
</div>

.item{
    margin-top: 25px;
    text-align: right;
}

解决方案

Set height for .button and add

overflow:visible;

to the parent.

You might need to spend some time to find the height that suites best your interface.

这篇关于Firefox和Chrome之间的1个像素差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！