Проблема с переполнением в IE7

Question

У меня проблема с IE7, связанная с переполнением. http://www.photocrayze.com/photos

В Google Chrome, Firefox или любом другом браузере, отличном от IE7, этот макет работает должным образом. Метки (особенно на фотографиях «Городские люди» и «Калейдоскопический») обрезаются по краям и устанавливаются на половину непрозрачности. При наведении курсора края отображаются и устанавливаются на полную непрозрачность.

Однако в IE7, когда вы наводите курсор мыши на фотографию, div.photo-tags-inner расширяет и портит макет. Я не уверен, как объяснить это лучше ... но как я могу решить эту проблему?

Кроме того, похоже, что установка непрозрачности на 0,5 не работает в IE8 (но работает в IE7, IE9 и других браузерах) ...

zoom: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
filter: alpha(opacity=0.5);

Answer 1

Giving .photo-tags-inner position:absolute и left:0 исправили проблему в IE7, а также отлично работают в других браузерах.

Answer 2

в вашем стиле CSS

.photo-browser tr td .photo-info .photo-tags {
margin: 0.5em auto auto;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 200px;
}

избавьтесь от скрытого переполнения, и оно должно работать.В следующий раз также используйте firebug Firexfox, чтобы поиграть со стилем, чтобы получить желаемый результат.Но потом я замечаю, что появляется горизонтальная полоса прокрутки, которая может означать, что вам нужно еще немного покопаться, чтобы узнать, как от этого избавиться.