开发者

Table-cell not working in IE, any idea?

An image is worth a thousand words, so here is one:

Table-cell not working in IE, any idea?

The upper image is the corect version, I used display:table-cell to avoid what happens in the second image in IE7. What do you suggest to use instead to avoid this case?

Here is the code used:

 <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&开发者_Python百科gt;


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

UPDATE:

CSS code:

.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;
}


IE7 does not support display: table-cell.

Though it's not really a problem in this instance, because there's no need for it. You can replace it with overflow: hidden to achieve the same effect: http://jsfiddle.net/thirtydot/AmNeV/


the simple cross-browser solution is to wrap the image in another division tag:

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

and let it float:

.sharerDataContainer .imgContainer {
    float: left;
}

try it! http://jsfiddle.net/9U7e9/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜