html - 如何制作一个以两边空白为中心的固定流体台？

Question

我制作了一个在 Chrome 和 Safari 中正常工作的 JS fiddle :

http://jsfiddle.net/ZWvzB/

但这在 Firefox 中的工作方式不同。在 Firefox 中，它右对齐。

有谁知道我怎样才能使它同时适用于 Firefox 和 Chrome？还有……还有……IE？

我希望这不会让任何人失望，但是为了让它只在 FF 而不是 chrome 中工作，我所做的是让 .sticky 类有一个宽度设置为 inherit 。然后它将只适用于 FF 和 Safari。

Answer 1

我会这样做:

CSS

.sticky
{
    position:fixed;
    top:0;
    left:31px;
    right:31px;
}
.sticky table
{
    border:1px solid blue;
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}
.sticky table tr
{
    background:blue;
    padding:5px;
    text-align:center;
}

HTML

<div class="sticky">
    <table>
        <tbody>
            <tr><td>Crazy Fixed Div</td></tr>
        </tbody>
    </table>
</div>

DEMO