Chrome和Firefox中不同的'div'高度 [英] Different 'div' heights in Chrome and Firefox

问题描述

我有一个表单元素包含不同内容的div元素，因此它们有不同的高度。以这个小提琴为例：

另一方面，Chrome不遵守 height：100％ df div，所以渲染为：

然后一个有趣的事实是，如果我没有记错的话，Chrome将它与Firefox一样渲染，直到我更新到版本63（我认为我之前有59版本）。

有什么建议吗？谢谢！

解决方案

请更改您的此Css代码并再次检查。 Chrome

  td {
 vertical-align：top; 
最小宽度：150px; 
 height：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;
} 

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