7

これを取りなさい: http://jsfiddle.net/zVscL/4/

.edit-me {
height:100%; /*does not behave the same as Chrome*/
width:10px;
border:1px solid blue;
background:red;
float:left;
overflow: auto;
}

Chrome でページを開き、次に Firefox で開きます。青い div は継承されません

なぜこれが起こるのか説明はありますか？修正はありますか？純粋な HTML/CSS ソリューションが望ましいです。

私はCSSを動作させるために何時間もこのたわごとに取り組んできました。最終的にFFを実行すると、これが実行されます。開発時間を食いつぶす。

4

1 に答える 1

14

trと の高さtdを 100%に設定してみてください。

tr, td { height: 100%; }

一般にheight: 100%、正しく機能させるには、要素の親のすべての高さも設定する必要があります。

編集：

別の解決策は、 のコンテンツをtdコンテナーでラップし、div絶対配置を使用して.edit-mediv が効果的に 100% の高さになるようにすることです。

HTML は次のようになります。

<table border="1">
    <tr>
        <td>
            <div class="container">
                <div class="edit-me"></div>
                Foo
                <br/>
                Bar
            </div>
        </td>
        <td>hello</td>
    </tr>
</table>

そしてCSS：

.container {
    position: relative;
    padding-left: 10px;
}

.edit-me {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width:10px;
    border:1px solid blue;
    background:red;
    overflow: auto;
}

お役に立てれば！

于 2013-02-24T10:06:56.780 に答える