不同的÷ div'Chrome和Firefox中的高度

问题描述

我有一张桌子，它的单元格包含具有不同内容的div元素，因此它们具有不同的高度.以这个小提琴为例:

另一方面，

Chrome浏览器不遵循div的 height:100％，因此渲染为:

然后一个有趣的事实是，如果我没有记错的话，直到我更新到版本63(我认为以前是版本59)之前，Chrome都将其渲染为Firefox.

有什么建议吗?谢谢！

解决方案

请更改您的此CSS代码，然后再次检查.铬

  td {垂直对齐:顶部；最小宽度:150像素；高度:1;} 

I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:

https://jsfiddle.net/6btarubL/2/

As you can see, the code is really simple:

HTML

<table>
  <tr>
    <td>
      <div style="background-color: orange">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: aqua">
        Line 1<br>
        Line 2
      </div>
    </td>
    <td>
      <div style="background-color: #fac">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
   <tr>
    <td>
      <div style="background-color: #8f5">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: #cb1">
        Line 2.1<br>
        Line 2.2
      </div>
    </td>
    <td>
      <div style="background-color: #eda">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
</table>

CSS

tr {
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 100%;
}

td div {
  height: 100%;
}

I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:

Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:

Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).

Any suggestions? Thanks!

解决方案

Please Change your this Css Code and Check again. Chrome

td {
  vertical-align: top;
  min-width: 150px;
  height:1;
}

这篇关于不同的÷ div'Chrome和Firefox中的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！