底部内容隐藏在ie7中的阴影

Question

我想显示以下输出：

除了ie7之外，以下行代码在所有浏览器中都能正常运行。在ie7它看起来：

所以你能告诉我这段代码有什么问题。

<div id="parent" class="shadow">
<div style="margin: 10px 20px 30px 20px; min-height: 300px; word-wrap: break-word;
  Low cost enclosed temperature control; UL Class 2 low voltage sensor circuit with var...                  
</div>
<table id="seemore" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <a href="#" id="" title="See More">
          <span class="SeeMoreText">See More</span> </a>
       </td>
    </tr>
 </table>

#parent    {

float: right;
width: 250px;
display: inline-block;
background-color: #e3e3e3;
margin-top: 30px;
position: relative;
max-height: 420px;

}

#seemore {

width: 100%;
height: 40px;
position: absolute;
z-index: 250;
*z-index:250;
bottom: -20px;
text-align: center;

}

Answer 1

将overflow:visible;添加到#parent

#parent{
 float: right;
 width: 250px;
 display: inline-block;
 background-color: #e3e3e3;
 margin-top: 30px;
 position: relative;
 max-height: 420px;
 overflow:visible; /*<--*/
}

请告诉我这是否适合您？

Answer 2

哦，这是明确的问题。有很多事情要避免它。 要么你可以试试这个。

/* For modern browsers */
        #parent:before,
        #parent:after {
            content:"";
            display:table;
        }

        #parent:after {
            clear:both;
        }

        /* For IE 6/7 (trigger hasLayout) */
        #parent {
            *zoom:1;
        }

或者，您可以使用以下here讨论的技术。 或者，如果仍未解决，请尝试this.