<按钮>Safari 中的额外填充问题

发布于 2024-10-19 23:26:54 字数 1009 浏览 1 评论 0原文

示例页面:

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

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

你是暖光i 2024-10-26 23:26:54

聚会有点晚了,但我发现用

-webkit-border-fit:border !important;

来覆盖 webkit 边框适合我,这对我来说是一种享受。对于 Magento 特别有用,其中 webkit-border-fit 属性有时会派上用场,但可能会导致某些

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.

裸钻 2024-10-26 23:26:54

以下来自 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;
    }
}

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;
    }
}
半暖夏伤 2024-10-26 23:26:54

这个问题在某些版本的 Safari 中得到了解决,我不确定到底是什么,但在最新的(5.1.5)中它对我有用。

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.

指尖上的星空 2024-10-26 23:26:54
button { background: red; outline: 1px solid red, position: fixed; }

解决 Chrome 和 Chrome 中额外填充的问题野生动物园。你必须指定position:fixed,这解决了我的问题。希望它也对你们有用!

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!

长途伴 2024-10-26 23:26:54

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文