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

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的回复:没有...这没什么区别.删除圆角也没有.我做了一个页面来演示桌面版如何呈现各种-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

如果您尝试将内边距设置为一个很大的值（例如 100 像素），您会注意到顶部和底部内边距会增大，而左侧和右侧的内边距在移动 Safari 中再次保持为默认值。因此，我认为可以肯定地认为，这个非常简单的问题算作 iOS 的 webkit 例程中的一个错误，并且除非 Apple 修复该问题，否则没有直接的解决方案。

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