[csswg-drafts] Bug in the spec's stylesheet.

frivoal has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== Bug in the spec's stylesheet. ==
I found a little issue with the CSS we're using for spec. Instead of 
`text-decoration: underline`, we use
```
a[href] {
  text-decoration: none;
  border-bottom: 1px solid;
  padding: 0 1px 0;
  margin: 0 -1px 0;
}
```
That works fine when the link has inline content, but when we have `<a
 href="..."><img src="..."></a>` it gets ugly, as we use 
`display:block` on images. This create a 1px wide (and normal height) 
line before and after the `<img>`.

Simplified demo here (with extra background color to make it more 
visible): http://jsbin.com/lelunu/edit?html,css,output

Real life example of this breaking in the [first side bar in the 
writing modes 
spec](https://drafts.csswg.org/css-writing-modes-3/#inline-base-direction)

The stray pixel and background (when hovered, we put a background) are
 unsightly, and they take quite a bit of vertical space. How do we fix
 that?

1. Go back to text-decoration. (I don't like it, there's a good reason
 we went to use a border)
2. Remove the 1px padding / -1px margin (I don't like it much, they 
were added for a reason)
3.  Given that `<img>` inside `<a>` most likely only occurs inside a 
figure, and a `<a>` which is a direct child of a `<figure>` is 
unlikely to contain text, adjust it there only:
```
figure > a {
  padding: 0;
  margin: 0;
}
```

Or some better idea?


Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/346 using your GitHub 
account

Received on Wednesday, 27 July 2016 15:05:43 UTC