Table-cell not working in IE, any idea?
An image is worth a thousand words, so here is one:
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 div
ision 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/
精彩评论