Effects of `position: absolute; width: auto;` on different elements

This was a test to explore how different elements handle the CSS property `width: auto;` when absolutely positioned. With the `left` and `right` properties set, elements should have an automatically calculated width. This is true for all elements tested with the exception of IFRAMEs and TABLEs. Also of note, the SELECT seems to sit a bit higher than the prescribed `top: 10em;` in Chrome and Firefox (not sure why…).

HTML

<iframe src="javascript:'IFRAME element'"></iframe>
<div>Block-level element (DIV)</div>
<em>Inline-block element (EM)</em>
<span>Inline-block element (SPAN with additional CSS)</span>
<select>
    <option>SELECT (naturally inline-block)</option>
</select>
<table>
    <tbody>
        <tr>
            <td>TABLE</td>
        </tr>
    </tbody>
</table>
<textarea>TEXTAREA</textarea>
<div class="line left"></div>
<div class="line right"></div>

CSS

body > * {
    width: max;
    border: 1px solid #ccc;
    background: #f5f5f5;
    position: absolute;
    left: 20px;
    right: 20px;
}

.line {
    top: 0;
    bottom: 0;
}
.line.left {
    border-width: 0 0 0 1px;
    left: 20px;
    right: auto;
}
.line.right {
    border-width: 0 1px 0 0;
    left: auto;
    right: 20px;
}

iframe {
    height: 3em;
}

div {
    top: 4em;
}

em {
    top: 6em;
}

span {
    display: inline-block;
    top: 8em;
}

select {
    top: 12em;
}

table {
    top: 12em;
}

textarea {
    top: 0em;
}