Found as problematic in early 2013, reported as bugs to all browser vendors then, but still problematic.

Set up: You want an icon image - here it is a 'marker' - with some generated Text on it.
To have the Icon/image printed, it is NOT a background image, as that would not be printed by default.
The image is in the source as an image, absolutely positioned behind the text. Problem: If you have a set up like below, a small image with some text on it, Browsers change the Link color when printing.

For Screen all colors should be white, in print they should be: white, red, white.
The outcome:

• Webkit (since Safari 6) sets the first color to light gray (something around #ababab) leaves the second red and the third white.
• OLD: Webkit Chrome 22 renders light gray, gray, white (like Safari but black/white - so that might be a printer setting)
• Chrome 42 renders light gray, red, white (like Safari)
• IE8/9 reders: black, black, black - the text is invisible on the black background
• IE 10 reders: black, red, black - the supposed to be white is invisible on the black background, the red stays red
• Firefox (37): black, red, black - the supposed to be white is invisible on the black background, the red stays red
• Opera (12): black, red, black - BUT the text (not the a-element but only the text treated as inline) has a white background. Not the prettiest, but probably close to bulletproof

2

2

2

The html:

	<a href="#">
		<img src="printbug/marker-black.png">
		2
	</a>
	

	a {
		position: relative;
		display: block;
		width: 27px; height: 38px;
		text-align: center;
		padding-top: 5px;
		color: #fff;
		text-decoration: none;
		}
	a img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1
		}