iphone - <input type ="submit"> Safari 移动设备上的填充错误？

Question

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

在 <input type="submit"> 按钮上，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 的回复...这没有区别。删除圆 Angular 也没有。我制作了一个页面来演示桌面版本如何呈现各种 -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;
}