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.

CSS3 entspricht width:calc(100% - 10px)

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-rightpadding-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

  1. 15

    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.

    .fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

    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/

    .fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}

    InformationsquelleAutor der Antwort Timidfriendly

  2. 1

    Setzen position: relative auf das Eltern-element, dann tun...

    .fit {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
}

    InformationsquelleAutor der Antwort Duopixel

Schreibe einen Kommentar