<按钮>Safari 中的额外填充问题按钮>
示例页面:
<!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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
聚会有点晚了,但我发现用
-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.以下来自 Filament Group 的 CSS 已经在所有浏览器中为我工作了一段时间了。 CSS 的基础,剥离按钮的所有样式如下:
span
用于滑动门技术(比您当前使用的div
更好) ,这可能是一个问题),可以通过链接找到完整的样式列表。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 thediv
you are currently using, this could be a problem), a full style listing can be found via the link.这个问题在某些版本的 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.
解决 Chrome 和 Chrome 中额外填充的问题野生动物园。你必须指定
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!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.