Greensleeves v2.0 / Tag: float

いままで Double margin float bug を回避するとき

div {
  float: left;
  margin-left: 20px !important; /* IE6 以下はバグで 40px のマージンが取られる*/
  margin-left: 10px;/* for IE6 */
}

とかやってたんですが、これだと強制的に specificity が最高になってあまり賢くないかなぁとか思ったので、調べてみたら display: inline; を使う方法があった。

div {
  float: left;
  margin-left: 20px;
  display: inline;
}

float した要素に、display: inline; を指定すると、このバグが消え去るらしい。

でもそれって、他の所謂モダンブラウザに影響ないのか調べてみると、CSS2 Specification にこう記載されていた。

1. If 'display' has the value 'none', user agents must ignore 'position' and 'float'. In this case, the element generates no box.
2. Otherwise, 'position' has the value 'absolute' or 'fixed', 'display' is set to 'block' and 'float' is set to 'none'. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
3. Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.
4. Otherwise, the remaining 'display' properties apply as specified.

なるほど、float が none 以外だと display は block にセットされるのか。とりあえず大丈夫そうだね。