Legende schwimmt nicht links auf IE7

Ich habe Probleme mit IE7. Ich habe folgendes HTML-Format.Legende schwimmt nicht links auf IE7

<fieldset class="wrapper"> 
    <legend class="ct">Legend </legend> 
    <div class="ct">Div 1</div> 
    <div class="ct">Div 2</div> 
</fieldset>

Und das ist die CSS-Stil

.wrapper .ct { 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    float:left 
}

, wenn ich dies zu testen auf anderen Browser funktioniert es gut, aber IE7 nicht. Bitte sehen Sie sich den Screenshot unten an. Aber wenn ich div anstelle der Legende verwende, funktioniert es. Hier ist auf Jsfiddle

Quelle

2012-04-05 Dips

Warum würden Sie verwenden, um ein 'legend' Element hier? "Legende" wird verwendet, um die Beschreibung von Elementen innerhalb eines 'fieldset' bereitzustellen und sollte (afaik) nicht außerhalb' fieldsets' verwendet werden. Ich denke, ein Überschriftenelement (wie "h2") ist hier angemessener. "Legenden sind auch sehr schwer zu gestalten, deshalb bin ich verwirrt darüber, warum du es dir schwerer machen würdest. – powerbuoy

Das ist kein gültiges HTML, das 'legend'-Element ist für' fieldsets' gedacht. [Kontexte, in denen dieses Element verwendet werden kann: Als erstes Kind eines fieldset-Elements.] (Http://dev.w3.org/html5/spec/single-page.html#the-legend-element) – steveax

Ich weiß Was meinst du. Es befindet sich tatsächlich in einem Fieldset, in dem divs mit Legenden überlagert sind. Das ist ein Format im CMS und ich kann es nicht ändern. – Dips

Nur für IE7 versuchen Einstellung: Inline anzuzeigen (nicht Inline-Block).

Richtig, vergaß, wie sehr eine Schmerzlegende ist. Sie müssen wahrscheinlich absolute Position verwenden, um sie als solche zu platzieren - mit einem linken Rand auf den anderen oder Padding-links auf dem Elternteil. Hängt vom Design ab.

Quelle

2012-04-05 00:11:19 NICCAI

IE nicht versteht display:inline-block, Sie display:inline stattdessen mit einem Hack verwenden können allein diesen Browser zu zielen, etwa so:

.wrapper .ct { 
    display:inline-block; 
    *display:inline; 
    float:left 
}

Quelle

2012-04-05 00:14:11

Das funktioniert auch nicht. funktioniert nur, wenn ich div anstelle der Legende verwenden – Dips

@ user1193749 cam Sie einen Testfall auf http://jsfiddle.net veröffentlichen? –

Hier ist der [link] (http://jsfiddle.net/2EZPY/2/) – Dips

Andres fast hatte. Fügen Sie ein "* float: none" nach dem "float: left" hinzu und Sie sollten gut sein.

.wrapper .ct { 
    display:inline-block; 
    float:left; 
    *display:inline; 
    *float:none; 
}

Here's the updated fiddle

Quelle

2012-04-05 03:29:29 ralgh

Antwort

Verwandte Themen