<button> extra-Polsterung problem in Safari

Den Beispiel-Seite:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Button test</title>
    <style>
      * { border: none; margin: 0; padding: 0; }

      body { padding: 5em; }

      span { background: lightblue; display: inline-block; }

      button { background: red; outline: 1px solid red }
      button div { background: yellow; }

      button::-moz-focus-inner {
        padding: 0;
        border: 0;
      }
      button {
        -webkit-appearance: none;
        -webkit-box-sizing: content-box;
        -webkit-box-align: start;
        -webkit-border-fit: lines;
        -webkit-margin-collapse: discard;
      }
    </style>
  </head>

  <body>
    <span>Adjacent text</span><button><div>Button</div></button>
  </body>
</html>

Hier ist das Bild:

<button> extra-Polsterung problem in Safari

Können Sie sehen, die extra weiße Polsterung in der Taste. Ist es möglich, um loszuwerden, die Polsterung im Safari-browser?

InformationsquelleAutor dmedvinsky | 2011-03-02
  1. 2

    Bisschen spät zur party, aber ich fand über-Reiten es die webkit-border-Passform mit:

    -webkit-border-fit:border !important;

    arbeitete ein Genuss für mich. Besonders nützlich für Magento, wo webkit-border-fit Eigenschaft ist nützlich, zu Zeiten, aber kann Probleme verursachen, für bestimmte <button>'s.

    • Nee, funktioniert nicht, auch. In der Safari-version, die ich getestet es dann zurück. In der neuesten version behoben ist gedacht und funktioniert so wie es ist.
    • Tut mir Leid, das zu hören. Hat bei mir in Chrome (neueste Version zum Zeitpunkt dieses Kommentars), aber nur mit dem Zusatz von !important. Okay, also es scheint sich immer noch nicht gelöst worden ist. Dies ist ein Chrome bug?
    InformationsquelleAutor Tim Cutting
  2. 1

    Den folgenden CSS von Der Filament Group gearbeitet hat bei mir in allen Browsern seit einiger Zeit. Die Basis des CSS, Streifen, Schaltflächen, der alle Ihre styling ist wie folgt:

    Den span ist für die sliding-doors-Technik (besser als die div Sie derzeit verwenden, könnte dies ein problem sein), ein komplettes style-Auflistung finden Sie über den link.

    button { 
    position: relative;
    border: 0; 
    padding: 0;
    cursor: pointer;
    outline: none; /* for good measure */
    overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
}

button span { 
    position: relative;
    display: block; 
    white-space: nowrap;    
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Google Chrome only - fix margins */
    button span {
        margin-top: -1px;
    }
}
    • Nachteil der Ausrichtung auf ganze browser (nicht die version niedriger als eine Zahl) ist, dass wenn der Fehler behoben werden wird im browser margin-top: -1px bekommen wird, wodurch unerwünschten offset.
    InformationsquelleAutor Mig
  3. 1

    Das problem behoben wird, in einer version von Safari, ich bin mir nicht sicher was genau, aber in der neuesten (5.1.5) es funktioniert für mich.

    InformationsquelleAutor dmedvinsky
  4. 0

    Form Elemente wie <button> sind in der Regel umgesetzt/gezeichnet als native OS-Steuerung, so dass Sie Aussehen und sich anders Verhalten in verschiedenen Browsern. Wenn Sie wollen die komplette Kontrolle über styling, Sie wären besser dran mit einem <a> tag.

    • Ich möchte es zu senden ein Formular mit "POST" HTTP-Methode, und es sollte funktionieren im Benutzer-Agenten, die kein JS unterstützen.
    • Ich bin aus Ideen, die in diesem Fall -- es ist eine schwierige Anforderung, vor allem wenn man Formular-Elemente. Hoffentlich jemand anderes kann sich mit einem hack für Safari.
    • Sie können ersetzen button Elemente mit links per JS so, dass nicht-JS-fähigen Benutzer sehen nur etwas understyled native-Taste, die in der Regel durchaus akzeptabel: wenn seltene Benutzer JS deaktiviert hat, ist er schon bereit für einige Ungereimtheiten.
    InformationsquelleAutor casablanca
  5. 0
    button { background: red; outline: 1px solid red, position: fixed; }

    Um das Problem zu lösen von extra-Polsterung in Chrome & Safari. Sie müssen angeben position: fixed dies das problem bei mir gelöst. hoffe es funktioniert für Euch auch!

    • Versucht es aber, dass munted die button-Breite/ - Höhe (und Rand gefüllt). Mit iOS5. Habe auch versucht -webkit-appearance: none; aber das hat auch nicht geholfen.
    InformationsquelleAutor Nitin Machhar
Schreibe einen Kommentar