CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Roman N
Roman N

Reputation: 5110

Different border position in chrome 29 and firefox 23 (ubuntu 12.04)

Html: 

<div class="st1">
  <a href="#">test</a>
</div>
<div class="st2">
</div>

And css:

.st1 a {
    text-decoration: none;
    border-bottom: 2px solid red;
    padding: 0px;
    margin: 0px;
}
.st1 {
    padding: 0px;
    margin: 0px;
}
.st2 {
    padding: 0px;
    margin: 0px;
    border-top: 2px solid green;
}

http://jsfiddle.net/uk4Ug/embedded/result/

Rendering in firefox: firefox.png

Chrome: chrome.png

I want the same rendering in chrome as in firefox. How to fix it?

Upvotes: 0

Views: 181

Answers (2)

nmaier
nmaier

Reputation: 33162

First of all, in my copies of Firefox (Stable/Nightly on OSX/Windows) your fiddle renders like what you have for "Chrome".

You could make the a an inline-block and balance the border out by a negative margin of the same size:

.st1 a {
     display: inline-block;
     /* ... */
}
.st1 a:hover {
    border-bottom: 2px solid red;
    margin-bottom: -2px;
    /* ... */
}

Complete fiddle based on yours.

Upvotes: 1

Danielle Vautier
Danielle Vautier

Reputation: 41

You can set a height on the div st1 so in this case:

.st1 { height:22px;}

That seems to do the trick.

Note: if you increase the font size you'll have to increase the div size.

Upvotes: 0

Related Questions