SPAN Höhe in Firefox

Question

Mit CSS versuche ich die Höhe eines SPAN-Tags in Firefox anzugeben, aber es akzeptiert es einfach nicht (IE tut komischerweise genug).

Firefox akzeptiert die Höhe, wenn ich ein DIV benutze, aber das Problem bei der Verwendung eines DIV ist der lästige Zeilenumbruch nach ihm, den ich in diesem speziellen Fall nicht haben kann.

Ich habe versucht, die CSS-Stil-Attribut von:

display: inline

für das DIV, aber Firefox scheint dann wieder auf SPAN Verhalten sowieso, und ignoriert die Höhe Attribut noch einmal.

Answer 1

<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 für sie, das sollte in Ordnung sein.

Answer 2

Da Sie es inline anzeigen, sollte die Höhe in Höhe Ihres Linienhöhenattributs festgelegt werden.

Je nachdem, wie es angelegt ist, können Sie immer float: left oder float: direkt auf der span/div verwenden, um den Zeilenumbruch zu verhindern. Aber wenn Sie es in der Mitte eines Satzes wollen, ist diese Option out.

Answer 3

Inline-Elemente können keine Höhen (oder Breiten) haben. SPANs sind standardmäßig display: inline. Der Internet Explorer ist in diesem Fall der Browser, der nicht funktioniert.

Answer 4

Sie können die Höhe (und Breite) eines span-Elements nur ändern, wenn es auf display: block; eingestellt ist. Dies liegt daran, dass es normalerweise ein Inline-Element ist. div ist normalerweise auf display: block; eingestellt.

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> 

Answer 5

Das Problem ist, dass ‚display: inline‘ kann keine Höhe, weil zugeordnet bekommen, Inline sein, es wird seine Höhe von seinem Inhalt. Anyway, wie definierst du die Höhe einer Box, die am Ende einer Zeile unterbrochen ist?

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

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

Answer 6

Sie können jedes Element auf display: inline-block setzen, damit es eine Höhe oder Breite erhält. Auf diese Weise können Sie auch andere "Blockstile" auf ein Element anwenden.

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

Beachten Sie, dass inline-block nicht erlaubt, Textausrichtung innerhalb des Elementes auf Firefox zu setzen, wenn es im Quirksmodus läuft. Alle anderen Browser erlauben dies, soweit ich weiß. Wenn Sie die Textausrichtung im Quirks-Modus festlegen möchten, müssen Sie die Eigenschaft -moz-inline-stack anstelle von inline-block verwenden. Beachten Sie, dass dies eine Mozilla-only-Eigenschaft ist, so dass Sie einige Browser-Erkennung durchführen müssen, um sicherzustellen, dass nur Mozilla dies erhält, während andere Browser den Standard inline-block erhalten.

Answer 7

height in em = relative line-height

beispiel height:1.1em mit line-height:1.1

= 100% gefüllt

Answer 8

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

Answer 9

Zur Höhe der Spanne eingestellt folgenden soll

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