IE 7,8：浮動「左」和固定寬度溢出「可見」

任何想法如何使IE呈現以下FF或Chrome？對方.. IE瀏覽器下IE 7,8：浮動「左」和固定寬度溢出「可見」

Firefox和Chrome顯示圖片忽略的寬度和顯示李的下一個彼此

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

來源

2012-09-10 Johny

請問[小提琴]（http://jsfiddle.net/）嗎？ – MalSu

這是一個小提琴：http://jsfiddle.net/j08691/nYJrd/。在IE8中看起來和我一樣。 – j08691

小提琴使用標準模式文檔（HTML5）進行渲染。原始問題沒有文檔類型。以怪癖模式查看代碼顯示問題。 –

我建議做這樣的事情： 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-10 16:49:52 Shmiddty

謝謝你，我會試試這個 – Johny

有關我剛纔討論的動畫的例子，請參閱：http://jsfiddle.net/nYJrd/3/ – Shmiddty

IE 7,8：浮動「左」和固定寬度溢出「可見」

回答

相關問題