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：浮动“左”和固定宽度溢出“可见”

回答

相关问题