0

IEにFFやChromeのように以下をレンダリングさせる方法はありますか??!!

FirefoxとChromeは画像を並べて表示します。InternetExplorerは幅を無視し、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 に答える