<button>Safari中的額外填充問題</button>

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更好，這可能是一個問題），可以通過鏈接找到完整的樣式列表。

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>類的表單元素通常作為本機OS控件實現/繪制，因此它們在不同的瀏覽器中可以具有不同的外觀和行為。 如果要完全控制樣式，最好使用<a>標記。

Answer 5

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

解決Chrome和Safari中額外填充的問題。 您將必須指定position: fixed ，這為我解決了問題。 希望它也對你們有用！

<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