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

（这类似于（也未回答的）问题#3430506，而是适用于输入标签而不是HTML5元素。）<input type =“submit”> Safari移动的填充错误？

在< INPUT TYPE = “提交” >按键，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-外观回应：无......这没什么区别。也没有删除圆角。我做了一个页面来演示桌面版本如何呈现各种-webkit外观对象;都有-webkit-border-radius：0并应用上面的代码。

尝试在桌面上的Safari浏览这些那么iPhone：
http://deleri.com/test.html

（Safari的手机屏幕截图对那些没有iPhone :)
deleri.com/safari.png

虽然我很乐意知道为什么会发生这个错误，现在我更关心修复它。我试过每种类型的display/overflow/box-sizing/-webkit-anything-/width：auto/text-indent选项，并且无法通过手动设置宽度来修复它（最终宽度需要百分比 - 基于，而奇怪的填充仍然适用）。我开始怀疑它是否是一些不明确的属性，或者用户代理样式表没有被覆盖。有什么想法吗？

来源

2010-08-18 pixi

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

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

来源

2010-08-24 10:21:33

我最终使用直接链接与JS处理程序提交onClick ...它可能无法在最终版本中工作，但它是一个很好的临时修复。谢谢！（手指交叉，苹果很快就修复了这个bug。） – pixi 2010-08-27 18:34:55

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

<input type="submit" />

你能尝试改变它

<button type="submit" />

哪个做同样的事情，但可能不会有错误吗？

来源

2010-08-23 13:31:28 hellweaver666

感谢您的建议，但不幸的是它是相同的错误;请参阅上面链接的问题＃3430506。 – pixi 2010-08-24 05:51:45

你对表格有控制吗？又名：你是否手动输入表格？

如果这样加任何一个ID或类标签将其

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

来源

2010-08-26 22:03:29 canintex

我确实拥有对表单的控制权，并且在样式化时尝试了ID和类的组合;既没有工作。（使其尽可能具体，但没有运气。） – pixi 2010-08-27 18:33:41

按钮的value属性内的文本已关闭，因此我只添加了-webkit-appearance：none，现在它居中，但-webkit-border-radius不再有效，而我那里有一个圆形的按钮。无论如何，我投了这个原因一个方形按钮比我只有一半的文本上舍入按钮更好。谢谢！ – Raul 2014-02-09 11:07:47

@Andrei将'-webkit-border-radius：0px'更改为'-webkit-border-radius：5px'，你应该得到一个带有5px圆角的按钮。 – canintex 2014-12-03 19:47:31

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

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

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

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

希望这会有所帮助。

来源

2011-02-21 06:50:47 Isaac

我有一个类似的问题，我注意到我的问题已经解决，当我将背景设置为渐变而不是简单的背景颜色。

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

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

来源

2013-11-19 17:59:04

是的，但可以使用边界半径，但仍然是一个体面的修复 – Raul 2014-02-09 11:12:54

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

回答

相关问题