css - 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>

#父母{

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

}

＃看更多 {

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

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

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

        #parent:after {
            clear:both;
        }

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

或者，您可以使用此处讨论的以下技术。或者，如果仍然没有解决，试试这个。