Question

在我的facelets模板中，有div min-height。它在Firefox浏览器中不起作用。

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

    </div>

我需要为这两个浏览器做些什么。

Answer 1

尝试

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

正如feeela所说，“min-height applies to block level and replaced elements”

Answer 2

仅使用高度，以便正常工作

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

Answer 3

根据规范here (spec) min-height不应该应用于表元素。因此，显示此属性的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的缺点 - 为传统IE获取x浏览器所需的额外样式的可能性（6,7,8）选项2的缺点 - 不必要的标记，非标准。

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

3 个答案: