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

【问题标题】：<button> extra padding problem in Safari<button> Safari 中的额外填充问题
【发布时间】：2011-07-07 09:40:17
【问题描述】：

示例页面：

<!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 浏览器中的填充？

【问题讨论】：

您可以使用 ANCHOR 来模拟按钮。 Anchors don't have such styling problems
查看我对以下类似建议的回复。
您尝试过使用 CSS 重置表吗？ developer.yahoo.com/yui/3/cssreset
是的，我做到了。它也无济于事。 :-(

标签： html css button safari padding

【解决方案1】：

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

【讨论】：

我希望它使用“POST”HTTP 方法发送一个表单，它应该可以在不支持 JS 的用户代理中工作。
@d.m：在那种情况下我没有想法——这是一个困难的要求，尤其是在考虑表单元素时。希望其他人可以为 Safari 想出一个 hack。
@dmedvinsky：您可以通过 JS 将 button 元素替换为链接，这样不具备 JS 能力的用户会看到样式稍显不足的本机按钮，这通常是完全可以接受的：如果少数用户禁用了 JS，他已经准备好应对一些矛盾了。

【解决方案2】：

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

修复 Chrome 和 Safari 中的额外填充问题。你必须指定position: fixed，这解决了我的问题。希望它也对你们有用！

【讨论】：

试过了，但是按钮的宽度/高度（并且边框被塞满）。使用iOS5。也尝试了-webkit-appearance: none;，但这也没有帮助。

【解决方案3】：

The Filament Group 中的以下 CSS 已经在所有浏览器中为我工作了一段时间。 CSS 的基础，去除按钮的所有样式如下：

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

【讨论】：

针对整个浏览器（不是低于某个数字的版本）的缺点是，当在浏览器中修复错误时，margin-top: -1px 会导致 undesired 偏移。跨度>

【解决方案4】：

派对迟到了，但我发现 webkit 边框适合它：

-webkit-border-fit:border !important;

对我来说是一种享受。特别适用于 Magento，其中 webkit-border-fit 属性有时会派上用场，但可能会导致某些 <button> 出现问题。

【讨论】：

不，也不行。在 Safari 版本中，我当时对其进行了测试。在最新版本中，它是固定的思想并按原样工作。
很抱歉听到这个消息。在 Chrome 中为我工作（截至此评论日期的最新版本），但仅添加了 !important。好吧，看来这个问题还没有解决。这是 Chrome 的错误吗？

【解决方案5】：

该问题已在某些版本的 Safari 中得到修复，我不确定具体是什么，但在最新 (5.1.5) 中它对我有用。

【讨论】：