(这类似于(也没有答案的)问题#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选项可以想象,并且不能通过手动设置宽度来修复它(最终宽度需要是百分比 - 基于,奇怪的填充仍然适用).我开始怀疑它是否是一些不起眼的属性,或者是否未覆盖用户代理样式表.有什么想法吗？
过去，我发现不同平台上相同浏览器中的CSS之间几乎没有区别-Mac上的Safari页面通常看起来与Windows上的Safari相同（FF-Win和FF-Mac相同）。但是，现在我遇到一个问题，即与Mac PC浏览器相比，两个Mac浏览器都将某些元素推开了一个像素。
有没有一种方法可以选择特定操作系统上的浏览器以应用CSS？也许像条件样式表之类的东西，仅适用于操作系统而不是浏览器？