: text-enabled browser support

Question

I had a problem when the text-decoration attribute does not work with the first-letter specification.

In this example, the goal of the code is to stylize the first letter of each <div class="content"> block.

 div.content:first-letter { text-decoration: underline; color: #bd00df; } 

The first letter of each <div class="content"> block is purple, but not underlined. How can I emphasize this in a simple and productive way?

Answer 1

This is a bug present in Chrome from version 36+. text-decoration not displayed during installation with :first-letter .

Chrome has an interesting history of rendering differences for text-decoration: underline compared to other browsers.

These examples have the first letter set to font-size: 10em; . I got screenshots from crossbrowsertesting.com .

You can view the full results in Chrome for OSX here and Windows 7 here.

Here you can view jsfiddle .

Firefox agreed

By comparison, Firefox has these consistent results verified since version 7 :

Internet explorer

Even IE is more consistent.

IE 6 - 7 IE8 + p>

Chrome is different

They come from Chrome running on Mac OS 10.9 and Windows 7 64bit.

Chrome Version 19 - Version 31

Single underline pixel

Chrome Version 32 - Version 33

Underlined image

Chrome Version 34 - Version 35

Windows 7 64bit Mac OSX

Chrome Version 36+

Error without underscore when installing with :first-letter .

Answer 2

Use border-bottom instead:

 div.content:first-letter { border-bottom: 1px solid red; color: #bd00df; } 

See Fiddle

Answer 3

In fact, it works great in chrome. This will be the browser support problem you are experiencing.

DEMO http://jsfiddle.net/3pg23vck/

 div.content:first-letter { text-decoration: underline; color: #bd00df; } 

Checked version of Chome Mac version 30.0.1599.101