Handle a `line-height` special case

Handle a `line-height` special case

Consider the following HTML:

    <p><a href=#>Link text</a></p>

And the following CSS:

    p {
      line-height: 20px;
      font-size: 20px;
      overflow: hidden;
    }
    a {
      font-size: 80px;
    }

Result, with the rectangles of the elements drawn:

    +---------+
    |         |
    |---------+-----------+
    |Link text|           |
    |---------------------+
    |         |
    +---------+

The wide rectangle belongs to the `<p>` while the other belongs to the
`<a>`. The top and bottom part of the `<a>` rectangle, outside of the
`<p>` rectangle (because the `font-size` of `<a>` is larger than the
`line-height`), are hidden due to `overflow: hidden;`.
`document.elementFromPoint()` will only return `<a>` in the area covered
by both rectangles. That is a problem since we start looking at the
top-left corner of the `<a>` rectangle, which will return whatever is
behind.

The solution is to add `line-height: normal;` temporarily to `<a>`,
causing the following (with a comparison to the right):

                               /    +---------+
                               /    |         |
    +---------------------+    /    |---------+-----------+
    |Link text            |    /    |Link text|           |
    |                     |    /    |---------------------+
    |                     |    /    |         |
    |                     |    /    +---------+
    |                     |    /
    +---------------------+    /

This way we can get the correct coordinates, but we only do it as a last
resort, since it is a performance expensive operation.