<输入类型=“提交”> Safari 移动设备上的填充错误？

Question

（这类似于（也未回答）问题 #3430506，但适用于输入标签而不是 HTML5 元素。 )

在 上按钮时，iPhone/移动 Safari 浏览器会在左侧和右侧添加内边距。这种情况不会发生在桌面版本上，也不会发生在我尝试过的任何其他移动/桌面 Webkit 浏览器上。它似乎在每一侧添加了以 px 为单位的字体大小（即 14px 字体意味着总宽度为 14px + 文本宽度 + 14px）。

目前我正在尝试以下方法来删除它：

/* webkit user-agent stylesheet uses input[type="submit"] */

form input[type="submit"] { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

我已经看到很多关于使用 -webkit-appearance:none 的回复...这没有什么区别。删除圆角也不行。我制作了一个页面来演示桌面版本如何渲染各种 -webkit-appearance 对象；全部都有 -webkit-border-radius:0 并应用上述代码。

尝试在桌面版 Safari 上查看这些内容，然后在 iPhone 上查看：
http://deleri.com/test.html

（Safari Mobile 屏幕截图，供没有 iPhone 的用户使用：）
deleri.com/safari.png

虽然我很想知道为什么会出现这个错误，但现在我更关心修复它。我已经尝试了可以​​想象到的每种类型的显示/溢出/框大小/-webkit-anything-/width:auto/text-indent选项，并且无法通过手动设置宽度来修复它（最终宽度需要是百分比-基于，并且奇怪的填充仍然适用）。我开始怀疑它是否是一些晦涩的属性，或者用户代理样式表是否没有被覆盖。有什么想法吗？

Answer 1

您可以控制表单吗？又名：您是否手动输入表格？

如果是这样，请添加 id 或 class 标签，

<input type="submit" id="submit" value="submit">

然后将 css 调整为

form input #submit { /* more specific to override webkit */ 
   -webkit-appearance:none;  
   -webkit-border-radius:0px;
   margin:0;  
   padding:0;  
   border:0;  
   display:block;
}

Answer 2

我遇到了类似的问题，我注意到当我将背景设置为渐变而不是简单的背景颜色时，我的问题得到了解决。

这在某种程度上忽略了填充值

#submit{
    background:#a0b9dc;
    padding:9px 35px;
 }

下面的代码为我解决了提交按钮上的填充问题。

#submit{
    background:#a0b9dc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC));
    background: -o-linear-gradient(bottom, #A0B9DC 0%);
    background: -moz-linear-gradient(bottom, #A0B9DC 0%);
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%);
    background: -ms-linear-gradient(bottom, #A0B9DC 0%);
    background: linear-gradient(to bottom, #A0B9DC 0%);
    padding:9px 35px;
}

Answer 3

如果您尝试将内边距设置为一个很大的值（例如 100 像素），您会注意到顶部和底部内边距会增大，而左侧和右侧的内边距在移动 Safari 中再次保持为默认值。因此，我认为可以肯定地认为，这个非常简单的问题算作 iOS 的 webkit 例程中的一个错误，并且除非 Apple 修复该问题，否则没有直接的解决方案。

解决方法是创建一个看起来像您想要的任何 DIV，并添加一个提交表单的 onclick 处理程序。无需使用真正的提交按钮。

Answer 4

今天，当我妈妈告诉我，我制作的页面在她的旧 iPhone 3G 上缺少文本时，我遇到了这个错误。果不其然，我打开了我妻子放在抽屉里的旧 3G，我的一个按钮上的文字被推到了一边，因为 Safari 插入了一些巨大的间距。

好消息是，在最新的更新中（不知道具体是什么，但我有更新的 iPhone 4），这个错误已经得到修复。

坏消息是，如果用户不更新他们的浏览器，除了不使用标签之外，我找不到任何解决方法。

我现在的建议是检查 Mobile Safari 的版本。如果他们运行的是最新版本（或者修复了此错误的版本或更高版本），他们将获得带有按钮的页面。如果没有，他们可以获得一个带有用于制作按钮的替代标签的页面。在我的页面上，这看起来不太好，而且有点尴尬，但我已经在检查基于该网站的移动或桌面版本的浏览器，所以这并不算太多。

希望这有帮助。

Answer 5

这可能是一个愚蠢的建议，但如果问题出在哪里，

<input type="submit" /> 

您可以尝试将其更改为

<button type="submit" />

“哪个做同样的事情但可能没有错误”？