0

任何想法如何让 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>
4

1 回答 1

0

我建议做这样的事情：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以显示卡片的某些部分。

于 2012-09-10T16:49:52.310 回答