示例页面:
<!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 浏览器中去除该填充？
最佳答案
晚会有点晚了，但我发现它覆盖了 webkit 边框:
-webkit-border-fit:border !important;
对我来说是一种享受。对 Magento 特别有用 webkit-border-fit属性有时会派上用场，但可能会导致某些问题 <button>的。
关于html - <button> Safari 中的额外填充问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5170041/