<input type="submit"> 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

（没有 iPhone 的用户可以使用 Safari Mobile 屏幕截图：）
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" />

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