CSS calc funktioniert nicht in Safari und Fallback

Habe ich dieses layout, das ich auf Arbeit bin.
Es hängt stark von CSS calc, um die notwendigen Berechnungen.

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

Nun, ich kann nicht ankommen dieses zu wirken in Safari. Gibt es etwas, was ich falsch mache?

Und auch, gibt es eine Möglichkeit, kann ich die Einführung eines fall-back-Mechanismus für Browser, die dies nicht unterstützen? Prozentsatz nicht tun, einen guten job, da muss ich abziehen, das Objekt in der Mitte, aus der zwei auf der Seite.

Dank.

InformationsquelleAutor der Frage Borsn | 2013-12-07

  1. 35

    Die Art, wie ich dieses problem gelöst, ist die Einführung eines reinen CSS-Herbst-wieder, dass ältere Browser, die CSS nicht unterstützen, calc würde nur Lesen.

    figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

    Den linken und rechten panels, erhalten eine Breite von 48%, wenn der browser nicht Lesen kann, der calc-Werte.

    figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

    Sowie das logo, das sich in-zwischen die beiden Platten wird eine Breite von 4%. Und auch eine minimale Breite von 40px. Und wenn die calc-Werte können gelesen werden, indem der browser, Sie 40px.

    InformationsquelleAutor der Antwort Borsn

  2. 2

    Du bist-code sieht gut aus, also ich denke, das problem ist browser-Kompatibilität. Nach Mozilla-Dokumentationfunktioniert dieses feature in Chrome, Firefox und IE (die neueren Versionen), aber nicht existent in der Oper und ist buggy Safari. diese Frage für mehr Informationen zur Kompatibilität. Eine viel sicherere fallback/alternative wäre, die Berechnungen in Javascript:

    if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  //do something here for smaller values
}

    Können Sie die jQuery .width() Funktion zu erkennen, die die Breite des Dokuments einstellen und dann die Breite der Elemente entsprechend. Aber gerade die Warnung, die Sie, versuchen, so viele Ihrer styles außerhalb Ihres Skripts und innerhalb Ihres stylesheets, weil sonst wird es wartbaren.

    Wenn es immer noch nicht funktioniert in einigen Browsern, verwenden Sie Modernizr zu erkennen, den browser/version/Betriebssystem und dann leiten Sie Sie auf eine andere version der Seite.

    Edit 1: zusätzliche Reaktionsfähigkeit

    Edit 2: Entfernt Intervall

    Edit 3: Hinzugefügt Erwähnung von Modernizr

    InformationsquelleAutor der Antwort hkk

Schreibe einen Kommentar