1

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.

chrome firefox

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;
}
MarshalSHI
  • 615
  • 1
  • 8
  • 17
  • How is the height of the parent determined? Firefox and chrome render text slightly different so if you're letting the height get set by text it may end up different. To solve it, you'll need to set an absolute height on the parent element. – George Yates Aug 12 '13 at 04:43
  • Provide the html/css for parent element too. – Jithesh Aug 12 '13 at 04:47
  • @GeorgeYates I do not have height of the parent. I need to set one? – MarshalSHI Aug 12 '13 at 06:12

1 Answers1

0

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.

user2500573
  • 1
  • 1