IE7 - как заставить пузырь сообщений работать? - PullRequest
Новая
       15

IE7 - как заставить пузырь сообщений работать?

0 голосов
/ 26 марта 2012

Я пытаюсь создать сообщение, и оно работает на всех браузерах, кроме IE7. Пузырь должен обернуться вокруг содержимого переменной ширины, поэтому его ширина будет зависеть от объема содержимого. Может увеличиваться до 100%, но может быть шириной всего 100 пикселей, если сообщение короткое. Здесь я сталкиваюсь с проблемами с IE.

Вот jsfiddle: http://jsfiddle.net/w9Vdh/

Основная конструкция пузыря - это верхний ряд, средний ряд и нижний ряд. У меня есть спрайт и пара других фоновых изображений, которые я использую для визуализации графики. Вот HTML-код: 

<div class="thread-item-wrapper">
    <div class="thread-item-horiz thread-item-top">
        <div class="thread-item-corner thread-item-topleft"></div>
        <div class="thread-item-corner thread-item-topright"></div>
    </div>
    <div class="thread-item-middle">
        <div class="thread-item-content-wrapper">
            <div class="thread-item-label">You:</div>
            <div class="thread-item-content">
                <div class="thread-item-msg">
                    <div class="thread-item-content-top"></div>
                    <p>Message</p>
                </div>
            </div>
        </div>
    </div>
    <div class="thread-item-horiz thread-item-bottom">
        <div class="thread-item-corner thread-item-bottomleft"></div>
        <div class="thread-item-corner thread-item-bottomright"></div>
    </div>
    <div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>

Вот как это должно выглядеть:

enter image description here

А вот как это выглядит в IE7:

enter image description here

Ответы [ 2 ]

1 голос
/ 26 марта 2012

см. В скрипте код и демонстрацию -

Fiddle: http://jsfiddle.net/w9Vdh/6

Демо: http://jsfiddle.net/w9Vdh/6/embedded/result/

снимок экрана IE7:

enter image description here

Обновлена ​​скрипта для исправления отправленного пузыря для IE7

Скрипка: http://jsfiddle.net/8NpwH/2/

Демонстрация: http://jsfiddle.net/8NpwH/2/embedded/result/

enter image description here

Изменения в коде html: 

<div class="thread-item-clear">&nbsp;</div>
            <div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>

Css: 

.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */
0 голосов
/ 28 марта 2012

"Полученные сообщения" работают ... пузырь хорошо переносится до ширины сообщения.Тем не менее, отправленные сообщения отображаются во всю ширину, и их размер не соответствует ширине сообщения.Это как-то связано с датой.В моей скрипке ( jsfiddle.net / 8NpwH ) вы увидите комментарий в CSS о стиле .thread-item-sent .thread-item-date, который указывает на CSS, который выглядит какпроблема.Если вы избавитесь от этого CSS, размер пузырьков будет правильным, но дата отсутствует.

screenshot

...