將鼠標懸停在絕對位置的縮略圖中（IE）

我創建了一個縮略圖圖片網格，當它懸停時，圖片消失了一個塊的顏色，並顯示圖片的標題。但在Internet Explorer中，而不是出現在其設置的縮略圖空間中的圖片和文本，它們都在左邊角落。將鼠標懸停在絕對位置的縮略圖中（IE）

圖片和標題存儲在box/category-widecreen div中，這是一個WordPress的動態代碼。

任何想法？

#page-wrap {width: 1060px; padding-bottom: 40px;} 
.box { margin: 20px; float: left; } 

.category-widescreen { width: 400px; height: 229px; background: #FF0000; } 
.category-widescreen a{text-decoration: none;} 
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;} 
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;} 

.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;} 

.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}

謝謝任何幫助！

來源

2011-11-07 amy123

心靈至少給予基本的HTML結構？ ..什麼是最好的，實際示例頁面（http://www.jsfiddle.net） – Joonas

http://www.amythornley.co.uk/blog/（： – amy123

太模糊了！正如其他人所建議的，給出基本的html結構。但是，一些觀察：
是否使用的字體大小有點太大（30px和26px）？
title {position：absolute; ...} ....確保父母的位置是樣式的：相對的，否則它會變成一團糟;
浮動怎麼樣？你是否確定事情正朝着正確的方向發展？

希望已經幫助或至少讓你的眼睛睜得大大的！哈哈哈...

來源

2011-11-07 13:48:05

Thankyou位置：相對工作在我的盒子elelement。有些照片仍然不符合保證金要求，但我現在會研究這一點！ – amy123

您需要設置position:relative到您的帖子，以便絕對定位的元素知道在哪裏跟隨。

試試這個：

.post { 
position:relative; 
}

來源

2011-11-07 13:55:49

將鼠標懸停在絕對位置的縮略圖中（IE）

回答

相關問題