<button> extra padding problem in Safari
Question
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?
5 answers
solution1
2 2012-03-31 09:44:09
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.
solution2
1 2011-07-25 19:00:50
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;
}
}
solution3
1 ACCPTED 2012-04-02 08:45:47
该问题已在某些版本的Safari中修复，我不确定到底是什么，但是最新版本（5.1.5）对我有效。
solution4
0 2011-03-02 16:02:13
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.
solution5
0 2011-07-25 18:53:44
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.