相关疑难解决方法(0)

当"position:absolute"时为什么"display:table-cell"被破坏

我遇到了一个奇怪的问题.我使用DIV作为容器,并将图像放入此DIV中.我希望这个图像垂直对齐到底部.以下代码有效.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

Run Code Online (Sandbox Code Playgroud)

但是,如果我更改CSS代码"的位置是:相对"到"的位置是:绝对"时,图像无法对齐到底了.这是Firefox3的错误吗？我怎么解决这个问题？

我目前的解决方案是:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

Run Code Online (Sandbox Code Playgroud)

但我不喜欢这个解决方案.

css position alignment

sta*_*005

lucky-day

9
推荐指数

1
解决办法

2万
查看次数

带有"position:absolute; bottom:0"的DIV不会粘贴在Firefox的容器底部

我有这个HTML源代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Stylish Web Page</title>
        <style type="text/css">
            body { padding: 0; margin: 0; }
            div.table { display: table;}
            div.tableRow { display: table-row;}
            div.tableCell { display: table-cell;}
            div.contentWrapper { width: 100%; height: 760px; position: relative;
                margin: 0 auto; padding: 0; }
            div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
                background-repeat: repeat-x; position: absolute; bottom: 0; }
        </style>
    </head>
    <body>
        <div class="table contentWrapper">
            <div class="tableRow">&#160;</div>
            <div class="footerBar">&#160;</div>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

页脚应该出现在页面的底部,它在Opera和Chrome中都是这样; 但是,在Firefox中,页脚后面有很多空房间.我究竟做错了什么？怎么解决？

这是一个截图:蓝色突出显示是页脚.

(请注意:"position:fixed"不是我想要的;我希望页脚显示在页面底部,而不是浏览器窗口.)

html css firefox positioning

Mr.*_*. X

lucky-day

6
推荐指数

1
解决办法

7772
查看次数

将<span>放在<td>表格单元格的底部

我试图让一个<span>坐在固定高度的底部<td>,但它似乎没有工作.

我正在使用Firebug在Firefox中开发,这是我的标记和CSS.

我已经阅读了其他帖子,说明td高度需要修复,我已经做到了,但是我仍然遇到同样的问题.如何将跨度定位在td的底部？

<td class="details_amount">
  <span class="item_total_price">
    £<span id="amount_99201100099">49</span>
  </span>
  <br>
  <span class="person_price">£5</span>
</td>

td {
    height: 55px;
    padding-top: 1.8em;
    vertical-align: top;
}

.item_total_price {
    height: 100%;
}

.person_price {
    bottom: 0;
    position: relative;
}

Run Code Online (Sandbox Code Playgroud)

它在Firefox中看起来如何