•  09-06-2019
  •  | 
  •  

Frage

Mit CSS, ich versuche, die Höhe eines SPAN-Tags in Firefox zu geben, aber es ist einfach zu akzeptieren es nicht (IE tut, komischerweise).

Firefox nimmt die Höhe, wenn ich einen DIV verwenden, aber das Problem mit einem DIV mit dem lästigen Zeilenumbruch, nachdem sie, was ich nicht in diesem speziellen Fall haben kann.

Ich habe versucht, das CSS-Stil-Attribut festlegen: 

display: inline
für das DIV, aber Firefox scheint dann trotzdem SPAN Verhalten wiederherzustellen, und ignoriere die Höhe noch einmal Attribut

.
War es hilfreich?

Lösung 

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

Solange der Behälter für was auch immer hält divs 1 und 2 ist breit genug, um für sie zu passen, dies sollte in Ordnung sein.

Andere Tipps

Sie können ein beliebiges Element display: inline-block es zu ermöglichen, eine Höhe oder Breite zu erhalten. Auf diese Weise können Sie auch alle anderen „Block Stile“ auf ein Element anzuwenden.

Eine Sache, vorsichtig zu sein, aber, ist, dass Firefox 2 nicht diese Eigenschaft nicht unterstützt. Firefox 3 ist der erste Mozilla-basierte Browser, um diese Eigenschaft zu unterstützen. Alle anderen Browser unterstützt diese Eigenschaft, einschließlich Internet Explorer.

Beachten Sie, dass inline-block Sie nicht erlauben, auf Firefox innerhalb des Elements Textausrichtung festlegen, wenn im Quirks-Modus ausgeführt wird. Alle anderen Browser erlauben dies, soweit ich weiß. Wenn Sie Text-Ausrichtung festlegen möchten, während im Quirks-Modus ausgeführt wird, werden Sie die Eigenschaft -moz-inline-stack statt inline-block verwenden. Denken Sie daran, dies ist ein Mozilla-Unterkunft, die nur so dass Sie einige Browser-Erkennung, um sicherzustellen, nur Mozilla wird dies werde zu tun haben, während andere Browser den Standard inline-block erhalten.

Inline-Elemente können nicht haben Höhen (noch Breiten) ähnlich. Span ist bereits standardmäßig display: inline. Internet Explorer ist eigentlich der gebrochene Browser in diesem Fall.

Da Sie es inline sind Anzeigen, sollte die Höhe auf der Höhe Ihrer line-height-Attribut gesetzt werden.

Je nachdem, wie es angelegt, könnte man immer float: left oder float: direkt an der Spanne / div den Zeilenumbruch zu verhindern. Aber wenn Sie es in der Mitte eines Satzes wollen, ist diese Option aus.

Das Problem ist, dass ‚display: inline‘ kann keine Höhe, weil zugeordnet bekommen, Inline sein, es wird seine Höhe von seinem Inhalt. Wie auch immer, wie definieren Sie die Höhe einer Box, die am Ende einer Linie gebrochen wird?

Sie könnten versuchen, ‚line-height‘ zu setzen stattdessen oder, wenn dies zu Ihrer Zufriedenheit funktioniert nicht, stellen Sie eine padding: 

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

Sie können nur die Höhe ändern (und Breite) ein span-Elements, wenn es um display: block; gesetzt. Dies ist, weil es ein Inline-Element ist in der Regel. div wird normalerweise auf display: block;.

könnte eine Lösung zu verwenden sein: 

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Zur Höhe der Spanne eingestellt folgenden soll in Firefox funktioniert 

span {
  display: block;
  height: 50px;
}

Textausrichtung innerhalb des Elements Sie anpassen können, um die Polsterung und Block-Inline-Attribute verwenden. Anzeige: inline-Block; padding-top: 3px; zum Beispiel

height in em = relative line-height

zum Beispiel height:1.1em mit line-height:1.1

= 100% gefüllt

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top