Абсолютный блок, вложенный в относительный блок, отображается ниже в IE8 - PullRequest
Новая
       25

Абсолютный блок, вложенный в относительный блок, отображается ниже в IE8

0 голосов
/ 12 апреля 2011

Тьфу.Я действительно, очень ненавижу кросс-браузерную совместимость ... Я работаю над сайтом Wordpress для клиента, чтобы создать всплывающее окно, которое появляется чуть ниже элемента, над которым я нахожу курсор (используя собственный шорткод).У меня есть верхний набор 16px, и он отлично работает в Firefox.Тем не менее, в IE8, это выглядит гораздо дальше.Даже если я установлю top на «0», он все равно будет отображаться НИЖЕ содержащего блога, а не вверху.

У меня также есть проблема, связанная с тем, что размер шрифта в IE8 составляет около 2 пикселейменьше.До этого тоже есть тег <sup></sup>, но его удаление мало что меняет - размер шрифта в IE8 все еще меньше.

Вот эта страница:

http://www.medicalmarcom.com/services/

У каждого вопросительного знака на левой стороне есть всплывающее окно, которое появляется при наведении на него курсора (что-то вроде подсказки).Мне нужно, чтобы он работал в FF, IE, Safari и Chrome.Единственный, в котором он не работает - это IE.К счастью, он не упомянул IE6, поэтому я не буду беспокоиться об этом, если он не выделит его.

Вот HTML: 

<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span>
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br />

<a href="http://www.medicalmarcom.com/services/medical-device-marketing-discovery/"><span style="color:#15398c"><em>Read More >>></em></span></a></div>
</div>
)</sup></span>

CSS: 

.popup_content {
    display: inline;
    position: relative;
}
.popup_inside {
    background-color: #FFF;
    border: 1px solid #000;
    text-align: left;
    font-size: 12px;
    color: #000;
    width: 300px;
    padding: 2px;
    line-height: 1.5;
    left: 0;
    top: 16px;
    z-index: 1001;
    position: absolute;
    display: none;
}
.popup {
    position: relative;
    z-index: 1000;
}

1 Ответ

1 голос
/ 12 апреля 2011

Хорошо, это связано с тем, что ie8 отображает тег sup, я полагаю.Он считает, что его базовый уровень такой же, как и остальная часть текста, а не над ним.Если вы хотите сделать это только с помощью css, я бы подумал о том, чтобы свернуть свой собственный надстрочный класс.

Вот скрипка чего-то, что, похоже, мне помогло.В качестве альтернативного решения, кажется, что правильно отображать в IE7, вы можете перевести IE8 в режим совместимости IE7.Оставьте эту строку в верхней части вашего <head>.Я не знаю, что это будет делать с IE9, но оно того стоит. 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
...