IE7 - Wie funktioniert eine Nachrichtenblase?

Ich versuche, eine Nachricht Blase, und ich habe es funktioniert auf allen Browsern mit Ausnahme von IE7. Die Blase muss sich um Inhalte mit variabler Breite wickeln, so dass die Breite von der Menge des Inhalts abhängt. Es kann auf 100% anwachsen, aber es ist möglicherweise nur 100 Pixel breit, wenn die Nachricht kurz ist. Dies ist, wo ich Probleme mit IE habe.IE7 - Wie funktioniert eine Nachrichtenblase?

Hier ist ein jsfiddle: http://jsfiddle.net/w9Vdh/

Das Haupt Konstrukt der Blase ist eine obere Reihe, mittlere Reihe und untere Reihe. Ich habe ein Sprite und ein paar andere Hintergrundbilder, die ich verwende, um die Grafiken zu rendern. Hier ist der 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>

Hier ist, was es soll wie folgt aussehen:

enter image description here

Und hier ist es, was es sieht aus wie in IE7:

enter image description here

Quelle

2012-03-26 Redtopia

entfernen alle diese Divs und Klassen, Schalter auf 'border-radius',' linear-gradient' und ': before' für den kleinen Pfeil und IE vergessen? : P – powerbuoy

Ich weiß, richtig !!!! Ich werde das in etwa 3 Jahren machen ... wenn IE 7 und 8 TOT sind! – Redtopia

Hier ist eine aktualisierte Geige: http://jsfiddle.net/w9Vdh/4/ Ich konnte oben/unten die richtige Höhe erreichen. Ich kann sie nicht dazu bringen, die Breite des Deckblattes zu überbrücken. – Redtopia

die Geige siehe Code und Demo-

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

Demo: http://jsfiddle.net/w9Vdh/6/embedded/result/

Screenshot IE7:

enter image description here

Aktualisiert Geige für gesendete Blase fix für IE7

Fiddle: http://jsfiddle.net/8NpwH/2/

Demo: http://jsfiddle.net/8NpwH/2/embedded/result/

enter image description here

Änderungen im Code 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 --- */

Quelle

2012-03-26 19:11:58 w3uiguru

Danke! Kannst du erklären, was du verändert hast? Ich lese den Code durch und es ist nicht offensichtlich. Tolle Arbeit Dinesh! – Redtopia

Ich konnte genau herausfinden, was du geändert hast, aber es hat einige Zeit gedauert. Vielen Dank für Ihre Hilfe. Wenn Sie Ihre Antwort dokumentieren, wird das noch hilfreicher sein. Nach dem Hinzufügen Ihres Fixes habe ich festgestellt, dass es nur bei empfangenen Nachrichten funktioniert. Hier ist eine Geige mit einer gesendeten und empfangenen Nachricht: http://jsfiddle.net/8NpwH/ Die gesendete Nachricht füllt die Breite und hat etwas mit dem Datum zu tun. Wenn ich dieses CSS los werde: .thread-item-send .thread-item-date {clear: left; schweben rechts; Rand: 20px 15px 0 0;}, die Blase passt zur Breite des Inhalts, aber das Datum fehlt. – Redtopia

Dinesh, danke für deine Hilfe! Irgendwelche Ideen, um die gesendete Nachrichtenblase richtig funktionieren zu lassen? – Redtopia

"Empfangene Nachrichten" Arbeit ... wickelt die Blase die Meldung schön Breite. Gesendete Nachrichten werden jedoch in voller Breite angezeigt und nicht korrekt auf die Nachrichtenbreite angepasst. Das hat etwas mit dem Datum zu tun. In meiner Geige (jsfiddle.net/8NpwH) sehen Sie einen Kommentar in der CSS-Datei im .thread-item-sended. Thread-item-date Stil, der auf das CSS hinweist, das das Problem zu sein scheint. Wenn Sie dieses CSS loswerden, wird die Blase korrekt skaliert, aber das Datum fehlt.

screenshot

Quelle

2012-03-28 16:46:21 Redtopia

Zur Erinnerung, dies ist nur ein Problem in IE7. – Redtopia

ok warten, das ist perfekt für die Jagd zu gehen. – w3uiguru

sehe meine aktualisierte Geige http://jsfiddle.net/8NpwH/2/ – w3uiguru

IE7 - Wie funktioniert eine Nachrichtenblase?

Antwort

Verwandte Themen