Question

（这类似于（也是未答复的）问题#3430506，但适用于输入标记而非HTML5元素。）

开＆lt; input type =“submit”＆gt;按钮，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

如果您尝试将填充设置为一个巨大的值，例如100px，您会注意到在移动版Safari中，顶部和底部填充增长，而左右填充则保持默认值。所以我认为可以安全地假设这很简单就算是iOS的webkit例程中的一个错误，除非Apple修复了这个问题，否则没有直接的解决方案。

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

Answer 4

今天我遇到了这个错误，当时我的妈妈告诉我，我所制作的页面上缺少旧版iPhone 3G上的文字。果然，我解雇了我妻子的旧3G，我们躺在某个地方的抽屉里，我的一个按钮上的文字正被推到一边，因为Safari正插入一些巨大的间距。

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

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

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

希望这有帮助。

Answer 5

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

<input type="submit" />

你能尝试改变它吗

<button type="submit" />

哪个相同，但可能没有错误？

Safari移动设备上的<input type =“submit”/>填充错误？

5 个答案: