需要有一個奇怪的CSS問題

在這個網站取一個樂幫助：http://www.naaf.no/fersking 需要有一個奇怪的CSS問題

如果你將鼠標懸停在三個文章框，您將看到文字和圖像的變化。

我將文字放置在浮動在div（圖片）上方的DIV中，不透明度設置爲60％。但任何人都可以向我解釋爲什麼第一篇文章比其他兩個盒子低約5px？第一篇文章與底部對齊 - 它應該高出5px。

下面是文本框的CSS：

#articleImageList .introText { 
    background-color:#000000; 
    color:#FFFFFF; 
    height:50px; 
    margin:0 2px; 
    opacity:0.6; 
    overflow:hidden; 
    padding:5px 20px; 
    position:relative; 
    top:-75px; 
    z-index:0; 
}

來源

2010-02-24 Steven

不能確定它是否是錯誤的原因，但你必須在你的標記至少一個未關閉的標籤：HTTP： //validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.naaf.no%2Ffersking – 2010-02-24 08:42:51

讓所有的圖像大小相同。調整大小/upload/Ferskingen/COLOURBOX1021676.jpg（第一個文章框中的圖像），所以它的440x239像素（像其他圖像，它是430x239 atm）。

該圖像使div.articleImage更高，然後其他兩個因此使您的position: relative; bottom: -75px;不渲染你想要的結果（但它的行爲是正確的）。

或者：

刪除min-width在#articleImageList img -selector在main.css線439

來源

2010-02-24 09:06:03 anddoutoi

呵呵，我不知道圖像高度會影響它。現在我明白了。謝謝！ :) – Steven 2010-02-24 13:52:10

似乎UA會嘗試保持*長寬比*或*限制比例*（使用photoshop舌頭）如果您只設置其中一個屬性。 – anddoutoi 2010-02-24 13:58:46

我使用最大寬度爲了讓圖像縮放高度並保持寬高比。因爲圖像的高度/寬度可能有所不同。 – Steven 2010-02-24 15:03:04

需要有一個奇怪的CSS問題

回答

相關問題