Another two issue with run-ins where behavior is inconsistent:
inheritance and first-line/first-letter. Consider this testcase:
<!DOCTYPE html>
<html>
<head>
<style>
#foo:first-line { color: blue; }
</style>
</head>
<body>
<div style="color: red">
<span style="display:run-in;">
bbb
</span>
<div id="foo" style="color: green">
ccc
</div>
</div>
</body>
</html>
Without the first-line style, the behavior in Opera, Webkit, and IE8 is
the same: the run-in runs in and is colored red. This makes sense to
me; I was going to implement the same.
With the first-line style, the behavior in Opera is that the run-in does
not run in (and is colored red), while that in Webkit is that the run-in
runs in and is colored blue. In IE8, the run-in runs in and is colored
red. The IE8 behavior is the one that makes the most sense to me here.
For the same test but with first-letter instead of first-line, the Opera
and IE8 behavior is to ignore the first-letter styling altogether while
the Webkit behavior is to give me a blue 'b' followed by two red 'b's.
The Webkit behavior is the one that makes sense to me here.
-Boris