内联块DIV填充表格单元格在Chrome，但不是其他浏览器？ [英] Inline-block DIVs fill table cell in Chrome, but not other browsers?

问题描述

我有一个小问题。在弄清楚如何让一些DIV嵌套在一个表格单元格内的所有适合百分比，取决于表格行的高度，我注意到它不工作在Firefox或IE。不是试图解释，这里是页面： http://www.faganarms.com/testcategory.aspx

p>

我想让每一行中的所有单元格展开为该行的高度，具体取决于它的内容。如果一行具有非常小的描述，则其高度可能比具有长描述的行更短。你会注意到在FF或IE中我正在寻找纠正的行为。

问题是，我只能编辑HTML的一部分，其他我只能CSS样式。我可以编辑 td.product-list-item-container 的内容，但我不能编辑该表的结构。它是硬编码到软件。

有没有人看到什么问题？我试过一些方法我在这里找到使用 display：table-row 和 display：table 工作作为成功，因为这一点，在Chrome至少。

解决方案

我删除了

code> display：inline-block 和表格行中的所有填充，将 height：100％添加到表行和 div.product-list-item ，并将填充添加到 div.product-list-item 现在。

I have a small issue. After figuring out how to get some DIVs nested inside of a table cell to all fit at 100%, depending on the height of the table row, I noticed it doesn't work in Firefox or IE. Instead of trying to explain, here's the page: http://www.faganarms.com/testcategory.aspx

I'm trying to get all of the cells in each row to expand to be the height of that row, depending on it's content. If one row has very small descriptions, it might be shorter in height than one with long descriptions. You'll notice in FF or IE the behavior I'm looking to correct.

The problem is, I can only edit some part of the HTML, others I can only style with CSS. I can edit the contents of td.product-list-item-container but I cannot edit the structure of that table. It's hard coded into the software.

Does anybody see what the issue is? I've tried some methods I found here on using display: table-row and display: table, but nothing has worked as successfully as this does, in Chrome at least. I couldn't find anything about the method that was Webkit compatible only, so I might be missing something.

解决方案

I removed display: inline-block and all padding from the table rows, added height: 100% to the table rows and div.product-list-item, and added the padding onto div.product-list-item and it worked fine in FF now.

这篇关于内联块DIV填充表格单元格在Chrome，但不是其他浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！