css - 请解释移动 Safari 中的文本对齐怪异

Question

我有一个简单的登录表单，其中包含一个“取消”按钮，使用以下代码创建：

var cancelButton = document.createElement("input"); 
cancelButton.setAttribute('type',"button");
cancelButton.setAttribute('value',"Cancel");
cancelButton.setAttribute("id", "user-cancel-button");

按钮的css如下：

#user-cancel-button{
  left: 3px;
  top:3px;
  text-align: center;   
  position: absolute;

}

在每个桌面浏览器中它看起来都很好，但是，在 Mobile safari 中，“取消”文本总是向右对齐（即使我设置了 text-align: left）。

另一方面，如果我为按钮添加一些填充（填充：1px），它会在移动 safari 中呈现。谁能解释发生了什么？

Answer 1

尝试这样做：

<button id="user-cancel-button"><div align="center">cancel</div><button>

这应该可以解决移动 safari 的问题。