IE瀏覽器，DIV，圖像，浮動和LightView

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