Question

我花了好几个小时......没有成功。

由于IE6＆amp; 7不能很好地支持inline-block，我想知道是否可以使用以下代码给出的其他属性进行相同的渲染：

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

小心：我无法添加/更改“关注我”的容器（例如使用float:left）。我只能控制div“parent”（以及div“parent”本身）中的内容

你有解决方法吗？

THX

Answer 1

实际上，内联块在IE6和IE7中工作，只是以一种奇怪的方式。

基本上，IE6和IE7实现内联错误。当一个自然内联元素具有布局（google为“hasLayout”以获取更多信息）时，它将像内联块元素一样，并且在其上设置宽度/高度。

所以用＆lt; span＆gt; s换掉那些＆lt; div class = image＆gt; s，这样它们就自然是内联的，然后你要做的就是触发hasLayout，你就可以了。我的典型方法是在元素上设置一个“zoom：1”属性 - 它只是一个正确的IE，不会做任何事情，但会触发hasLayout。

当然，更好的解决方案是使用＆lt; img＆gt;元素，如果可能的话。

Answer 2

试试这个：

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

我没有IE测试，但无论如何，不要忘记doctype，如果没有它，IE的行为会有所不同。

Answer 3

它很蹩脚，但这适用于Chrome 3.0，Firefox 3.5，IE 6,7和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>

如何在没有显示的情况下拥有2个邻接块：内联块？

3 个答案: