2010-11-20 9 views
0

Ich möchte meine Grenzen Prozentsätze machen, weil mein ganzes Layout auf Prozentsätzen basiert und wenn der Bildschirm klein genug ist, schwebt ein Teil niedriger, weil die Grenzen in px zu groß sind.Können Sie CSS-Rahmen in% s messen?

jsFiddle here

+0

ist der Code: http://goo.gl/AHvEH – chromedude

+0

Legen Sie es in der Frage beim nächsten Mal! – Eric

+0

@Eric, ich habe es kommentiert, weil es war, nachdem ich die Frage erstellt hatte und ich wollte, dass die Leute es bemerkten. – chromedude

Antwort

0

nein, man kann nicht Prozentsatz für die Rahmenbreite verwenden, zumindest nicht zuverlässig, als Pekka und Sime weist darauf hin.

Ja, Sie könnten einen Prozentsatz für eine Grenze verwenden, aber es ist sehr unorthodox, das Problem ist wahrscheinlich woanders in Ihrem Layout.

+0

nein, es funktioniert nicht – thejh

+0

@thejh In welchen Browser (n)? –

+0

@ Šime Vidas: Ausprobieren mit Chrome 9.0.587.0 dev. – thejh

1

Ja, sieh spec out: http://www.w3.org/TR/css3-background/#border-width

der% -Wert von der Breite des umschließenden Blocks basiert, wenn der umschließende Block einen horizontalen Textmodus hat, sonst die Höhe.

Browser-Kompatibilität: nicht existent.
Es funktioniert nicht in einem der Browser, die ich habe: IE9 Beta, FF 4 Beta 7, Opera 10,63, neueste Chrome und Safari.

+0

True, aber beachten Sie, dass dies in CSS3 neu zu sein scheint –

2

Wenn ich die Angaben richtig gelesen, es ist valid in CSS 3:

Prozentwerte: Breite * von Block enthält

Es scheint ungültig in CSS zu 1 und 2.1:

Prozentwerte: N/A

daher würde ich nicht darauf vertrauen, dass es jetzt in allen Browsern unterstützt wird.

+0

Die Frage ist, welche Browser Prozentsätze unterstützen und welche nicht. –

0

Es könnte in CSS3, aber nicht in CSS2 gültig sein.

CSS2 das Box-Modell sagt border width ist von length Art und:

Das Format eines Längenwert ( in dieser Beschreibung durch <length> bezeichnet) ist ein <number> (mit oder ohne Nachkommastelle Punkt) unmittelbar gefolgt von einer Einheit Kennung (zB px, em, etc.). Nach einer Nulllänge ist die Einheiten-ID optional.

Beachten Sie auch, dass percentages nicht die gleiche Sache sind und im nächsten Abschnitt besprochen werden.

Browser, die CSS3 vollständig unterstützen, sind selten. Sie möchten sich nicht unbedingt auf diese Funktion verlassen. Diese

+0

édéric ** Alle ** modernen Browser unterstützen CSS3 ... bis zu einem gewissen Grad. –

+0

@ Šime, ich nehme an, wenn IE9 herauskommt, haben Sie Recht;) –

+0

édéric Liste der CSS3-Funktionen in IE8 implementiert: @ font-face (teilweise), indirekt angrenzenden (a ~ b) Selektor, mehrere Attributselektoren (^ =, $ =, * =, ns |), overflow-x und overflow-y (teilweise), word-wrap, text-justify, schreib-modus, box-sizing, ruby-position, ruby-align, ruby- Überhang, SVG-Farbschlüsselwörter, transparent (Wert) (teilweise). IE8 unterstützt CSS3. –