Question

我正在尝试在HTML表格单元格中放置一个红色矩形图标，后跟一些文本，这里我的行为非常奇怪。我只使用DIV绘制红色矩形，如此处的示例所示。我希望矩形的高度是单元格的高度，所以我设置高度：100％

<table border="1">
    <td>
        <div style="width:10px;height:100%;background:red;display:inline-block"></div>
        Height in percentage
    </td>
    <td>
        <div style="width:10px;height:10px;background:red;display:inline-block"></div>
        Fixed Height
    </td>    
</table>

解决方案类型适用于Chrome，但不适用于FireFox。 FireFox只显示一个空白区域。当我将高度设置为100％时，它似乎不喜欢它可以解释为什么？如果DIV不是正确的方法，那么实现这一目标的最佳方法是什么？

感谢。

Answer 1

Firefox需要div中的内容。以下修改将做。数字实体是Unicode的“零宽度空格字符”。当然，一个不间断的空间（ ）也可以。

<div style="width:10px;height:100%;background:red;display:inline-block">&#8203;</div>

请参阅this fiddle。

Answer 2

首先，您需要了解此处的问题。 CSS高度等属性是＆＃34;计算＆＃34; 。在这种特殊情况下，第一个div的计算高度（让我们称之为 unseenForce ，我们应该吗？）是0，而它的堂兄，恰当地命名为 seenForce 是10px的。见下文：

http://jsfiddle.net/gvo4kf41/

＆＃13;

$(document).ready(function() {
    $('.Info').html('The computed height of the unseenForce is ' + $('#unseenForce').height() + 'px <br />');
  $('.Info').append(document.createTextNode('The computed height of the seenForce is '+ $('#seenForce').height() + 'px'));
});

＆＃13;

.Info {
  color: red;
  margin-top : 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table border="1">
    <td>
        <div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
        Height in percentage
    </td>
    <td>
        <div id="seenForce" style="width:10px;height:10px;background:red;display:inline-block"></div>
        Fixed Height
    </td>    
</table>

<div class="Info">
  
</div>

＆＃13;

这是因为unseenForce的祖先都没有特定的高度。因此，Firefox无法附加height。

你需要做什么强迫高度的计算值大于0.有很多方法可以做到这一点，这里的所有答案都显示了不同的方法。选择一个适合您需求的那个。

这就是我的方式。只需为行添加高度（<td>）。

＆＃13;

table td {
    height: 10px;
}

＆＃13;

<table border="1">
    <td>
        <div id="unseenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
        Height in percentage
    </td>
    <td>
        <div id="seenForce" style="width:10px;height:100%;background:red;display:inline-block"></div>
        Fixed Height
    </td>    
</table>

<div class="Info">
  
</div>

＆＃13;

希望这有帮助!!!

Answer 3

尝试设置父元素的高度。

<td style="height:20px">

这应该有助于解决Firefox问题。

编辑： JSFiddle： https://jsfiddle.net/prove64m/

Answer 4

首先，您忘记了<tr>标记。所以这应该是正确的HTML：

<table>
    <tr>
       <td>
          <div></div> first text
       </td>
       <td>
          <div></div> second text
       </td> 
    </tr>
</table>

然后是CSS部分：

table {
    border:1px solid;
}
td {
    height:40px;
}
div {
    display:inline-block;
    vertical-align:bottom;
    width:10px;
    height:100%;
    background:red
}

注意高度总是被评估，所以，如果没有任何明确的设置，那就没有什么＆＃34;来计算＆＃34 ;;我们在这里做到了：

td {
    height:40px;
}

其他重要的事情;我想你想在<div>元素之后控制文本的位置;这可以通过以下方式使用在线块元素：

div {
    ...
    vertical-align:bottom;
    ...
}

其他可能的值包括：middle，top，...

这里是小提琴：https://jsfiddle.net/pm43k26w/5/

当高度设置为100％时，DIV在表格单元格中不可见

4 个答案: