IE not respecting tabbing order of radio buttons with label for/id attributes?

Question

Can anyone tell me why the tabbing order is messed up in IE 6/7/8, Chrome, Safari when you hit the radio buttons here? Works in Firefox and Opera.

http://jsbin.com/inuxa5

If you check the first checkbox then start tabbing, you'll go from radio 1 to checkbox 3 (bypassing radio 2)

Conversely, if you start by checking checkbox 4 and shift-tab to head backwards you'll go from radio 2 to checkbox 2 (bypassing radio 1).

<form>

<p>
<input id="c1" type="checkbox" name="check1">
<label for="c1">checkbox 1</label>

<input id="c2" type="checkbox" name="check2">
<label for="c2">checkbox 2</label>
</p>

<p>
    <input id="r1" type="radio" name="member">
    <label for="r1">radio 1</label>

    <input id="r2" type="radio" name="member">
    <label for="r2">radio 2</label>
</p>

<p>
<input id="c3" type="checkbox" name="check3">
<label for="c3">checkbox 3</label>

<input id="c4" type="checkbox" name="check4">
<label for="c4">checkbox 4</label>
</p>

</form>

Answer 1

It's the expected behaviour.
You are using radio buttons with the same name so it's either "r1" or "r2".

Short: if you want to switch between the 2 use left/right arrow instead of tab.