问题
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.
回答1:
You could use the min-height CSS property and set it to the height of one row! You should do this for the div class "product-list-item". Now the div will take this height as minimum, or just set the height to the height you want.
回答2:
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.
来源：https://stackoverflow.com/questions/16692618/inline-block-divs-fill-table-cell-in-chrome-but-not-other-browsers