<button>Safari中的额外填充问题</button>

Question

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;
        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: 这是图片：

You can see the extra white padding in the button. 您可以在按钮中看到额外的白色填充。 Is it possible to get rid of that padding in Safari browser? 是否有可能摆脱Safari浏览器中的填充？

Answer 1

Bit late to the party but I found over-riding it the webkit border fit with: 参加聚会有点晚，但我发现可以替代webkit的边框：

-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. 对于Magento尤其有用，其中webkit-border-fit属性有时会派上用场，但可能对某些<button>造成问题。

Answer 2

The following CSS from The Filament Group has worked for me in all browsers for some time now. The Filament Group的以下CSS已经为我在所有浏览器中使用了一段时间。 The base of the CSS, to strip buttons of all their styling is as follows: CSS的基础，以剥离所有样式的按钮，如下所示：

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. span用于滑动门技术（比您当前使用的div更好，这可能是一个问题），可以通过链接找到完整的样式列表。

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;
    }
}

Answer 3

该问题已在某些版本的Safari中修复，我不确定到底是什么，但是最新版本（5.1.5）对我有效。

Answer 4

Form elements such as <button> are usually implemented/drawn as a native OS control, so they can look and behave differently in different browsers. 诸如<button>类的表单元素通常作为本机OS控件实现/绘制，因此它们在不同的浏览器中可以具有不同的外观和行为。 If you want complete control over styling, you'd be better off using an <a> tag. 如果要完全控制样式，最好使用<a>标记。

Answer 5

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

To fix the issue of extra padding in Chrome & Safari. 解决Chrome和Safari中额外填充的问题。 you will have to specify position: fixed , this solved the problem for me. 您将必须指定position: fixed ，这为我解决了问题。 hope it will work for you guys too! 希望它也对你们有用！

<button>Safari中的额外填充问题</button>

问题描述

5 个解决方案

解决方案1
2 2012-03-31 09:44:09

解决方案2
1 2011-07-25 19:00:50

解决方案3
1 已采纳 2012-04-02 08:45:47

解决方案4
0 2011-03-02 16:02:13

解决方案5
0 2011-07-25 18:53:44

<button>Safari中的额外填充问题</button>

问题描述

5 个解决方案

解决方案1 2 2012-03-31 09:44:09

解决方案2 1 2011-07-25 19:00:50

解决方案3 1 已采纳 2012-04-02 08:45:47

解决方案4 0 2011-03-02 16:02:13

解决方案5 0 2011-07-25 18:53:44

解决方案1
2 2012-03-31 09:44:09

解决方案2
1 2011-07-25 19:00:50

解决方案3
1 已采纳 2012-04-02 08:45:47

解决方案4
0 2011-03-02 16:02:13

解决方案5
0 2011-07-25 18:53:44