CSS3 entspricht width:calc(100% - 10px)
Ich bin auf der Suche nach einer alternative zu migrieren meine CSS - arbeitet bereits an FF und Chrome, da QtWebKit es ist nicht das Rendern von einigen CSS3-feature yeat.
Habe ich die folgenden Sachen:
.fit {
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
}
Ich soll eine Klasse passend zu allen element wie angezeigt im wireframe-Beispiel.
Hinweis: Fast alle CSS3 features perfekt gerendert, aber wie hieß es vor *-calc()
Probleme haben und nicht finden können, eine andere Lösung zB. mit margin-right
padding-right
etc.
@EDIT: erstellte ich ein Turnschuh http://jsfiddle.net/dj3hh/ zu zeigen das erwartete Verhalten - Sie können die Größe fiddle und alle Ränder Respekt 10px
von rechts. Ich möchte einen neuen Weg, dies zu tun ohne calc()
InformationsquelleAutor der Frage Ragen Dazs | 2013-04-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie ändern Sie den box-Modell-rendering zu
box-sizing: borderbox
dann die Polsterung wird in der gesamten Breite, anstatt Hinzugefügt.Mit diesem Beispiel gehe ich davon aus, das Sie hinzufügen, die Klasse, die das eingliedern von Elementen.
Browser-Unterstützung ist sehr gut; alle modernen Browser. Nur müssen Sie ein polyfill für IE7 und unter.
Für mehr hintergrund-info: paulirish.com/2012/box-sizing-border-box-ftw/
EDIT:
Dies ist eine Lösung, die ich glauben vollständig erfüllt Ihre kurze, siehe fiddle: http://jsfiddle.net/David_Knowles/UUPF2/
InformationsquelleAutor der Antwort Timidfriendly
Setzen
position: relative
auf das Eltern-element, dann tun...InformationsquelleAutor der Antwort Duopixel