New CSS2.1 and CSS3 bugs in modern browsers

By Nicolas Gallagher

Browser bug demo page for CSS typography experiment.

Examples of some differences in the handling of :first-letter, :first-line, transform:rotate(), and absolutely positioned generated content by Firefox 3.6, Chrome 4.0, Safari 4.0, Opera 10.5, and Internet Explorer 8.

:first-letter test 1

typography

Styles

p {
  text-transform:capitalize;
}

p:first-letter {
  float:left;
}

Results


:first-letter test 2

typography

Styles

p:first-letter {
  float:left;
  font-size:20px;
}

Results


:first-letter test 3

typography

Styles

p:first-letter {
  float:left;
  font-size:20px;
  line-height:120px;
}

Results


:first-line test

I am partial to some typography

Styles

p {
  text-transform:capitalize;
}

p:first-line {
  font-weight:bold;
  text-transform:lowercase;
}

Results


:first-letter and :first-line test

I am partial to some typography

Styles

p {
  text-transform:capitalize;
}

p:first-letter {
  float:left;
}

p:first-line {
  font-weight:bold;
  text-transform:lowercase;
}

Results


Firefox 3.6 rotational transformation test

I love typography

Styles

p {
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  -o-transform:rotate(-20deg);
}

Results


Chrome 4.0 border-radius following rotational transformation test

Styles

div {
  width:50px;
  height:50px;
  margin:40px;
  background:#000;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  -webkit-transform:rotate(-20deg);
  -moz-transform:rotate(-20deg);
  -o-transform:rotate(-20deg);
  transform:rotate(-20deg);
}

Results


Internet Explorer 8 positioned generated content test

i

Styles

p {
  position:relative;
  z-index:1;
  font-size:200px;
  font-weight:bold;
  line-height:1;
}

p:after {
  content:"";
  position:absolute;
  z-index:10;
  top:50%;
  left:27px;
  width:10px;
  height:10px;
  background:#fff;
}

Results

You can find me on twitter.