Question

任何想法如何使IE呈现如FF或Chrome中的以下内容!!

Firefox和Chrome在彼此之下显示图像.. Internet Explorer忽略宽度并显示LI彼此相邻

 <html>
    <style>
    ul{
      position: relative;
      height: auto;
    }
    li{
      list-style-type: none;
      width: 30px !important;
      display: inline;
      float: left;
      overflow: visible
    }
    img{
      width:100px;
    }
    </style>
    <body>

    <ul>
      <li>
         <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Joker_red_02.svg/220px-Joker_red_02.svg.png" />
      </li>

      <li>
         <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Joker_red_02.svg/220px-Joker_red_02.svg.png" />
      </li>

      <li>
         <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Joker_red_02.svg/220px-Joker_red_02.svg.png" />
      </li>
    </ul>

    </body>
    </html>

Answer 1

我建议做这样的事情： http://jsfiddle.net/nYJrd/2/

ul{
    /*position: relative;
    height: auto;*/ /* These lines aren't really doing anything (with the current example). */
    margin:0;
    padding:0;
}
li{
    list-style: none;
    float: left;
    overflow: hidden;
    margin-left:-70px; /* This is what makes them overlap. */
}
li.first{ 
    margin-left:0;
}
img{
    width:100px;
}

也就是说，如果您可以控制标记。如果不这样做，则可以使用li + li {}，但这与非CSS3浏览器不兼容。这种方法的好处是，您可以为这些li元素留下的边距设置动画，以显示卡片的部分内容。

IE 7,8：浮动“可见”浮动“左”和固定宽度

1 个答案: