CODEWITHSUNDEEP
cssinternet-explorercross-browser
Evgeny
Evgeny

Reputation: 6290

Inconsistent underline thickness in IE

I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.

Sample markup:

<a>Hello, <span>fooooo</span> bar</a>

Styles:

    a {
        font-weight: bold;
        text-decoration: underline;
    }

    span {
        font-weight: normal;
    }

enter image description here (right click on image and select view/open in new tab to get a better view)

In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?

Fiddle: http://jsfiddle.net/FfBGn/

Upvotes: 0

Views: 695

Answers (2)

kei
kei

Reputation: 20481

Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:

border-bottom:1px solid #000;

demo

Alternatively, if you have to use text-decoration:underline, you could just make bold bolder.

font-weight:800;

demo

Upvotes: 4

Kat Farrell
Kat Farrell

Reputation: 340

Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?

border-bottom: 1px solid #000000;

Upvotes: 1

Related Questions