CSS中的最小高度在Firefox中不起作用。它在IE中工作

在我的facelets模板中，有div min-hight。它在Firefox瀏覽器中不起作用。CSS中的最小高度在Firefox中不起作用。它在IE中工作

<div class="body"> 
     <table> 
      <tr> 
       <td valign="top" width="100%" style="min-height: 400px;"> 
        <ui:insert name="body"/> 
       </td> 
      </tr> 
     </table> 

    </div>

我需要爲這兩個瀏覽器做些什麼。

來源

2012-09-19 CycDemo

已編輯，這是一個HTML/CSS問題。 HTML的來源不相關。 – SJuan76

「DIV」沒有'min-height'，而是'TD'。查看樣式表中的其他表格格式。 – feeela

嘗試用

<td valign="top" width="100%" style="display:block; min-height: 400px;">

正如feeela說，「min-height applies to block level and replaced elements」

來源

2012-09-19 09:07:19 Giona

我認爲這是正確的答案。 [「'min-height'適用於：塊級和替換元素]]（https://developer.mozilla.org/en-US/docs/CSS/min-height） – feeela

謝謝我將它添加到答案 – Giona

thz，它爲我工作。 – CycDemo

只使用高度，它的正常工作

<div class="body"> 
    <table> 
     <tr> 
      <td valign="top" width="100%" style="height: 400px;"> 
        <ui:insert name="body"/> 
      </td> 
     </tr> 
    </table> 
</div>

來源

2012-09-19 09:08:16

-1

按照規範here (spec)最小高度不宜應用表格元素。因此，它是顯示此屬性錯誤的IE瀏覽器，而不是Firefox（沒有意外）。你可以做的是停止使用表格進行佈局（標準推薦）或者在表格單元格中放置一個DIV，並將最小高度屬性應用於div以強制TD採用其內容大小。

選項1：

<body> 
    <div class="body" style="min-height:400px;"> 
     <ui:inser name="body"/> 
    </div> 
</body>

選項2：

<div class="body"> 
    <table> 
     <tr> 
      <td valign="top" width="100%"> 
       <div style="min-height: 400px;"> 
        <ui:insert name="body"/> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div>

選項1的缺點 - 可能獲得的X瀏覽器IE的遺產需要額外的造型（6,7,8）選項2的缺點 - 不必要的標記，非標準。

來源

2012-09-19 09:20:39 Dpolehonski

這是錯的。規範規定應適用於所有非替換行內元素： http://stackoverflow.com/a/14420691/1792090 它是一個已知的bug在FF： https://bugzilla.mozilla.org/show_bug的CGI？ID = 307866 – unity100

CSS中的最小高度在Firefox中不起作用。它在IE中工作

回答

相關問題