Anchor Element Content Box Anomaly

Anchor Text.

div { border: 1px dashed #ccc;
      border-top: none;
    }
h2  { letter-spacing: 0.85em;
    }
a   { text-decoration: underline;
      border: 3px dashed #f0f;
      padding-bottom: 6px;  /* for firefox: allows underline and border-bottom comparison */
    }

The pink dashed border should totally encompass the underlined H2 element. The problem is not limited to A(nchor) elements inside H2 elements inside DIV elements. It occurs for any A element inside a block element that inherits a non-zero letter-spacing value and appears immediately after a top-borderless DIV element.

Let me try that again: the DIV must contain a block element (H2, H3, P) that contains an anchor (A) element. The problem appears

1. When the block element is the first element inside the DIV
2. The DIV must have a border but not have a top border (any combination of left, right, and bottom)
3. The block element must have a non-zero letter spacing value (negative or positive)

and it is most prominent when the font family is a monospaced font, though this is not a factor in recreating the rendering anomaly.

Granted, this is a rare case and planets need to align. There are several workarounds:

1. remove the DIV
2. remove the DIV border(s)
3. give the DIV a top border
4. put anything between the DIV and the H2/block element
   ...but the best method is probably to
5. move the letter-spacing declaration to the A element rather than the H2 element.