请解释移动野生动物园中的文字对齐怪异

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;

}

在每个桌面浏览器中它看起来都很好，但是，在移动版Safari中，“取消”文本始终与右边对齐（即使我设置了text-align：left）。

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

Answer 1

尝试这样做：

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

这可以解决移动游猎的问题。