Question

示例页面：

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

这是图片：

您可以在按钮中看到额外的白色填充。是否有可能在Safari浏览器中摆脱填充？

Answer 1

有点迟到了，但我发现它超越了webkit边框：

-webkit-border-fit:border !important;

为我做了一个享受。对于Magento特别有用，webkit-border-fit属性有时派上用场，但可能会导致某些<button>出现问题。

Answer 2

以下来自The Filament Group的CSS已经在所有浏览器中使用了一段时间了。 CSS的基础，用于剥离所有样式的按钮如下：

span用于滑门技术（优于您当前使用的div，这可能是一个问题），可以通过链接找到完整的样式列表。< / p>

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

<button>等表单元素通常作为本机操作系统控件实现/绘制，因此它们在不同浏览器中的外观和行为可能不同。如果您想完全控制样式，最好使用<a>标记。

Answer 5

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

解决Chrome和＆amp ;;中额外填充的问题。苹果浏览器。你必须指定position: fixed，这解决了我的问题。希望它也适合你们！

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

5 个答案: