javascript - 为什么这些按钮在 iPhone 上是矩形的，而在我的桌面浏览器上却是方形的？

Question

我正在尝试制作方形按钮，但它们在 iPhone 上是宽矩形。为什么会这样？我有 JS 样式它们：

var btn = document.createElement("button");
btn.setAttribute("id", "paletteColor");
btn.className = "paletteButton"
btn.style.width = '25px';
btn.style.height = 'px';
btn.style.lineHeight = '0px';
btn.style.fontSize = '26px';
btn.style.verticalAlign = 'top';
btn.style.backgroundColor = "#CCCCCC";
var t = document.createTextNode("");
btn.appendChild(t);

document.getElementById("palette").appendChild(btn);

CSS：

.paletteButton {
    display: inline-block;
    border: 1px outset black;
    cursor:pointer;
    -webkit-text-stroke: 1px white;
    -webkit-appearance: none;
}

然后我有一个 id 为“调色板”的空 div。

Safari MacOS：

iOS 上的 Safari：

标签： javascripthtmlcssbutton

Answer 1

似乎 IOS Safari 正在根据声明的字体大小计算默认填充。（在 iPad 上的 IOS 14.4 上测试）

如果我们在左边和右边设置填充为 0，那么我们会得到一个正方形。当然，这意味着如果您将文本放入任何调色板条目中，您可能还需要放入一些填充。

这是填充左/右 0 的片段。

var btn = document.createElement("button");
btn.setAttribute("id", "paletteColor");
btn.className = "paletteButton";
btn.style.paddingLeft = '0px';
btn.style.paddingRight = '0px';
btn.style.width = '25px';
btn.style.height = '25px';
btn.style.lineHeight = '0px';
btn.style.fontSize = '26px';
btn.style.verticalAlign = 'top';
btn.style.backgroundColor = "#CCCCCC";
var t = document.createTextNode("");
btn.appendChild(t);

document.getElementById("palette").appendChild(btn);

.paletteButton {
    display: inline-block;
    border: 1px outset black;
    cursor:pointer;
    -webkit-text-stroke: 1px white;
    -webkit-appearance: none;
}

<div id="palette"></div>