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屋!