<button> extra padding problem in Safari_问答_开发者

<button> extra padding problem in Safari

开发者 https://www.devze.com 2023-02-14 04:30 出处：网络

The sample page: <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>Button test</title>

The sample page:

<!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开发者_C百科;
        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>

Here is the image:

<button> extra padding problem in Safari

You can see the extra white padding in the button. Is it possible to get rid of that padding in Safari browser?

Bit late to the party but I found over-riding it the webkit border fit with:

-webkit-border-fit:border !important;

worked a treat for me. Esspecially useful for Magento where webkit-border-fit property comes in handy at times but can cause problems for certain <button>'s.

The following CSS from The Filament Group has worked for me in all browsers for some time now. The base of the CSS, to strip buttons of all their styling is as follows:

The span is used for the sliding-doors technique (better than the div you are currently using, this could be a problem), a full style listing can be found via the 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;
    }
}

The problem is fixed in some version of Safari, I'm not sure what exactly, but in latest (5.1.5) it works for me.

button { background: red; outline: 1px solid red, position: fixed; }

To fix the issue of extra padding in Chrome & Safari. you will have to specify position: fixed, this solved the problem for me. hope it will work for you guys too!

Form elements such as <button> are usually implemented/drawn as a native OS control, so they can look and behave differently in different browsers. If you want complete control over styling, you'd be better off using an <a> tag.