表格单元在IE中不起作用，有什么想法吗？

Question

图像胜过千言万语，所以这里有一个：

上图是核心版本，我使用display：table-cell来避免IE7中第二张图片中发生的情况。您建议使用什么来避免这种情况？

以下是使用的代码：

 <div class="sharerDataContainer">

    <img src="http://tctechcrunch2011.files.wordpress.com/2011/09/perfectworld.png?w=145" width="90" alt="Andrew" />

    <div class="sharerData">

                <p class="sharerDataTitle">
                               <a href="http://example.org" target="_blank">
                                               Website Title Here
                               </a>
                </p>


                <p class="sharerDataAddress">
                               mbac.squarespace.com
                </p>


               <p class="sharerDataDescription">
                       Congratulations to Rachel Edwards, who won a fabulous Bloom Tea Treatment Box Set (worth £20) from our friends at Running Cupcake
               </p>

     </div>

  </div>

更新：

CSS代码：

.sharerDataContainer img {
    float: left;
}

.sharerData {
    background: none repeat scroll 0 0 transparent;
    border: 0 solid #0077A5;
    color: #808080;
    display: table-cell;
    font-size: 11px;
    line-height: 15px;
    padding: 0 10px !important;
    position: relative;
}

.sharerData .sharerDataDescription {
    margin-top: 5px;
}

Answer 1

IE7 does not support display: table-cell。

虽然在这种情况下它并不是真正的问题，因为没有必要。您可以replace it with overflow: hidden达到同样的效果：http://jsfiddle.net/thirtydot/AmNeV/

Answer 2

简单的跨浏览器解决方案是将图像包装在另一个div ision标记中：

<div class="imgContainer">
  <img src="" width="90" alt="Andrew" />
</div>

让它漂浮：

.sharerDataContainer .imgContainer {
    float: left;
}

试试吧！ http://jsfiddle.net/9U7e9/