Iphone <；输入类型="；提交&燃气轮机；Safari mobile上的填充bug？

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

在按钮上，iPhone/mobile 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外观的回复：无。。。这没什么区别。去除圆角也是如此。我制作了一个页面来演示桌面版本如何呈现各种webkit外观对象；都有-webkit边框半径：0，并应用了上述代码

尝试在桌面Safari和iPhone上查看这些内容：

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

---

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

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

<input type="submit" /> 

你能帮我换一下吗

<button type="submit" />

---

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

如果您尝试将填充设置为一个巨大的值，例如100px，您会注意到，在mobile Safari中，顶部和底部填充会增加，而左侧和右侧仍然保持默认值。因此，我认为可以安全地假设，在iOS的webkit例程中，这个相当简单的问题被视为一个bug，除非苹果解决这个问题，否则没有直接的解决方案

---

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

您可以控制表单吗？你是不是手工输入了表格

如果是这样，则向其添加id或类标记

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

---

今天我遇到了这个问题，我妈妈告诉我，我制作的一个页面在她的旧iPhone 3G上丢失了文本。果不其然，我点燃了我妻子的旧3G手机，我们把它放在某个地方的抽屉里，我的一个按钮上的文字被推到了一边，因为Safari插入了一些巨大的间隔

好消息是，在最新的更新中（不知道具体是什么，但我已经更新了iPhone4），这个错误已经被修复

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

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

---

希望这能有所帮助。

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

这忽略了填充值

#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;
}

---

谢谢你的建议，但不幸的是，它是相同的错误；请看上面链接的问题#3430506。我确实可以控制表单，并且在设计样式时尝试了ID和类的混合；两者都不起作用。（让它尽可能具体，但没有运气。）按钮值属性内的文本已关闭，因此我只添加了-webkit外观：无，现在居中，但-webkit边框半径不再工作，我在那里有一个圆形按钮。不管怎样，我投了这个票，因为一个正方形按钮比只有一半文本的圆形按钮要好。谢谢@Andrei将

-webkit边框半径：0px

更改为

-webkit边框半径：5px

，您应该会得到一个带有5px圆角的按钮。我最后使用了带有JS处理程序的直接链接来提交onClick。。。它在最终版本中可能不起作用，但它是一个很好的临时补丁。谢谢（祈祷苹果很快就能修复这个漏洞。）是的，这是可行的，但边界半径不再适用，尽管仍然是一个不错的修复

#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;
}