0

私は非常に単純なマークアップを持っています:

<div id="container">
    <div id="content"></div>
    <div id="ta-container">
        <div id="gripper"></div>
        <textarea></textarea>
    </div>
</div>​

そして、基本的なチャット ウィンドウのようにスタイルを設定します。こちらのコードをご覧ください: http://jsfiddle.net/pavek/rdxN5/3/

これは FF、Chrome、IE では完全にうまく見えますが、Opera (12.11、現在最新) ではそうではありません。最も紛らわしいのは、コンテナ内に絶対配置された 2 つの要素が互いにどのように影響するかということです。これは理解できません。

この問題の可能な解決策を確認したいと思います。注: div#contentの高さを操作することは避けたいと思います。

4

2 に答える 2

1

理由はわかりませんが、マージンを削除して、エッジを配置したい場所を上/右/下/左のプロパティに反映させることで修正できます。

http://jsfiddle.net/rdxN5/4/

#content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 5px 5px 0 5px;
    border: 1px solid red;
}

これは大まかな調整です。本来あるべき位置に到達するには、自分で少し微調整する必要があります。

于 2012-12-06T18:35:02.940 に答える
0

Opera ハックを使用します。

しかし、なぜそのために絶対位置を使用しているのですか?

これを試してください：http://jsfiddle.net/liccyfuentes/KbxJK/

HTML: CSS: * { -moz-box-sizing: border-box; ボックスサイズ: ボーダーボックス; }

#container {
    margin: 20px;
    width: 200px;
    padding:5px;
    min-height: 300px;
    border: 1px solid blue;
    float:left;            
}

#main-content {
    min-height:248px;
    border:1px solid red;
    float:left;
    width:188px;
}
textarea {
    float:left;
    width:188px;
    margin-top: 5px;
    resize: none;
    border: 1px solid green;
}
​
于 2012-12-06T17:46:53.863 に答える