Question

我试图弄清楚为什么图片似乎在IE浏览器和Chrome之间混杂。

唉，它是一所古老的公立学校CMS（我们早在00年代就在说话），而且我当然不是程序员，而只是一个试图兼顾CSS和HTML的业余爱好者。

我希望我能得到一些指示。我假设它是关于浮动正确的DIV容器，以使其正确呈现。当我创建叠加文本时，整个事情litteralky爆炸了。

CSS可以在下面看到。 Page source can be viewed outside of the CMS frame-template here.

干杯，Trin

#persongalleri
{
 margin-left:5px;
 overflow:hidden;
}
img.person /* til personalesiden */
{
    width:80px;
    height:auto;
    border:1px solid #000;
}
div.personwrap
{
    float:left;
    position:relative;
    margin:2px;
}
div.undertekstkasse
{
    position:absolute;
    bottom:1px;
    left:0px;  
    width:100%;  
    background-color:black;  
    font-family: 'Verdana, Arial, Helvetica';  
    font-size:14px;
    font-weight:bold;
    color:white;  
    opacity:0.6; 
    filter:alpha(opacity=60);
}
p.undertekst
{
    padding:6px;  
    margin:0px; 
    text-align:center;      
}

Answer 1

很难发现，但所有照片的高度都略有不同，所以当你漂浮它们时，你会看到这种奇怪的行为。如果你在.personwrap上放置一个固定的高度，那么这将解决你的布局问题。

div.personwrap {
    height: 105px;
    margin: 2px;
    position: relative;
    float:left;
}

你也可以移除浮动，只需添加display: inline-block

IE，DIV，图像，浮点和LightView

1 个答案: