负余量 - 顶部与浮点数组合不能按预期工作（仅限Firefox）

Question

我想尝试创建此屏幕，但右侧的文本字段会移到上方。

这是working example，这是我的代码：

HTML：

<div class="TileMenu">
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Castle" alt="Castle" />
            </div>
            <div class="TileText">
                <p>Text1</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="House" alt="House" />
            </div>
            <div class="TileText">
                <p>Text 2</p>
            </div>
        </div>
    </div>
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Satellite" alt="Satellite" />
            </div>
            <div class="TileText">
                <p>Text 3</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Palace" alt="Palace" />
            </div>
            <div class="TileText">
                <p>Text 4</p>
            </div>
        </div>
    </div>
</div>

CSS：

.TileRow{
    padding: 5px 0px;
    clear: both;
}

.LeftTile{
    width: 49.7%;
    float: left;
    /*height: 340px;
    overflow: hidden;*/
}

.LeftTile img{
    width: 100%;
}

.RightTile{
    width: 49.7%;
    float: right;
    /*height: 340px;
    overflow: hidden;*/
}

.RightTile img{
    width: 100%;
    float: right;
}

.TileImage{
    width: 49.7%;
}

.TileText{
    position: relative;
    margin-top: -80px;
    max-width: 150px;
    height: 50px;
    background-color: #FFF;
    color: #57abe9;
    padding-left: 10px;
    display: table;
}

.TileText p{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3em;
}

在我尝试使用top:-80px;之前，我在每行之间都有一个很大的空白区域（因为文本字段）。所以现在我正在使用margin-top: -80px;，但这似乎只适用于Firefox。

Answer 1

位置：绝对怎么样？

http://jsfiddle.net/KjakS/8/

Answer 2

如果删除RightTile类中图像上的float:right怎么办？对于这样的事情：http://jsfiddle.net/KjakS/7/

.RightTile img{ width: 100%; }