How to have 2 adjacents blocks without display:inline-block?
I have been spending hours on that...wit开发者_开发技巧h no success.
Since inline-block is not well-supported by IE6&7, I wanted to know if it is possible to have the same render using other attributes given by the following code :
<html><head>
<style type="text/css">
.img {
float: left;
width:17px;
height:15px;
display:block;
background-color: #FD3;
border-style:solid;
}
.txt {
float: left;
}
.parent {
display: inline-block
}
</style></head><body>
Follow Me
<div class="parent ">
<div class="img"></div>
<div class="img"></div>
<div class="txt">(a comment)</div>
</div></body></html>
Careful : I cannot add/change the container of "Follow me" (using for instance a float:left). I can control ONLY what is inside the div "parent" (and the div "parent" itself)
Do you have a workaround?
Thx
Actually, inline-block works in IE6 and IE7, just in a strange way.
Basically, IE6 and IE7 implement inline wrong. When a naturally inline element has layout (google for "hasLayout" for more info on that) it will act like an inline-block element and respect width/height set on it.
So swap out those <div class=image>s with <span>s so they're naturally inline, and then all you have to do is trigger hasLayout on them and you're good to go. My typical method is to set a "zoom:1" property on the elements - it's an IE-only properly that won't do anything, but will trigger hasLayout.
An even better solution, of course, is to just use <img> elements, if that's possible at all.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.img {
display: block;
position: absolute;
width: 17px;
height: 15px;
background-color: #FD3;
border-style: solid;
border-width: 3px;
}
.leftimg {
top: 0;
left: 0;
}
.rightimg {
top: 0;
left: 23px;
}
.txt {
display: inline;
}
.parent {
display: inline;
position: relative;
padding: 0 0 0 46px;
}
</style>
</head>
<body>
Follow Me
<div class="parent ">
<div class="img leftimg"></div>
<div class="img rightimg"></div>
<div class="txt">(a comment)</div>
</div>
</body>
</html>
I do not have IE to test, but anyway, don't forget the doctype, IE behaves differently without it.
it's lame, but this works in Chrome 3.0, Firefox 3.5, IE 6, 7 and 8
<html><head>
<style type="text/css">
.img {
display: inline-block;
width:17px;
height:15px;
background-color: #FD3;
border-style:solid;
}
.parent, .txt {
display: inline;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.img {
display: inline;
}
.parent, .txt {
display: inline;
}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
.img {
display: inline;
}
</style>
![endif]-->
</head><body>
Follow Me
<div class="parent ">
<div class="img"></div>
<div class="img"></div>
<div class="txt">(a comment)</div>
</div></body></html>
加载中,请稍侯......
精彩评论