css - 请解释一下 mobile 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 的问题。