Browser Compatibility

An ongoing list of unresolved Browser compatibility issues I've encountered while developing websites. Reporting these is difficult because it requires consulting the spec to determine the correct behavior before establishing what browsers to report it to.

Tables with percentage heights

<table style="height: 1px;">
    <tbody>
        <tr style="height: 200px;">
            <td>
                <div style="height: 100%; border: solid;">
                    Content here.
                </div>
            </td>
        </tr>
    </tbody>
</table>

Chrome and Safari push the content towards the top of the container, while Firefox vertically centers it.

Justify content of submit input

<input style="width: 200px; display: inline-flex; justify-content: start !important;" type="submit">

There are of course rendering/style differences between the browsers, but that's not what's interesting. What's interesting is that Safari respects the justify-content rule and moves the text on the button accordingly, but Firefox and Chrome ignore it.