< input type =" submit">在Safari手机上填充错误？ [英] <input type="submit"> padding bug on Safari mobile?

问题描述

（这与＃3430506 （也是未回答的）问题类似，但适用于输入代码，而不是HTML5元素。）

(This is similar to the (also unanswered) question #3430506, but applies to input tags instead of HTML5 elements.)

在< input type =submit>按钮，iPhone /移动Safari浏览器左右添加填充。这不会发生在桌面版本，也没有任何其他移动/桌面Webkit浏览器我试过。它似乎添加字体大小在px到每一边（即14px字体意味着总宽度是14px +文本宽度+ 14px）。

On <input type="submit"> buttons, the iPhone/mobile Safari browser adds padding to the left and right. This doesn't happen on the desktop version, nor any other mobile/desktop Webkit browsers I've tried. It appears to add the font-size in px to each side (i.e. 14px font means total width is 14px + width of text + 14px).

目前，我尝试以下操作将其删除：

Currently I'm trying the following to remove it:

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

$ b $ p

我已经看到很多关于使用-webkit-外观的响应：none。 ..这没有什么区别。也不删除圆角。我做了一个页面来演示如何桌面版本呈现各种-webkit外观对象;所有都具有-webkit-border-radius：0和上面的代码。

I've seen lots of responses about using -webkit-appearance:none... this makes no difference. Neither does removing rounded corners. I made a page to demo how the desktop version renders various -webkit-appearance objects; all have -webkit-border-radius:0 and the above code applied.

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

http://deleri.com/test.html

Try viewing these on desktop Safari then iPhone:
http://deleri.com/test.html

（Safari手机屏幕截图，没有iPhone）

deleri.com/safari.png

(Safari Mobile screenshot for those without an iPhone:)
deleri.com/safari.png

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

While I'd love to know why this bug occurs, right now I'm more concerned about fixing it. I've tried every type of display/overflow/box-sizing/-webkit-anything-/width:auto/text-indent option imaginable, and can't fix it by manually setting the width (final width needs to be percentage-based, and the strange padding still applies). I'm starting to wonder if it's some obscure property, or if the user agent stylesheet isn't being overwritten. Any thoughts?

推荐答案

如果你尝试将填充设置为一个巨大的值，比如100px，你会注意到，底部填充增长，而在左侧和右侧保持在默认值，在移动Safari。所以我认为这是很安全的假设这个相当简单的计数作为一个bug在iOS的webkit例程，没有直接的解决方案，除非苹果解决这个问题。

If you try setting the padding to an enormous value, say 100px, you'll notice that the top and bottom padding grow, while again left and right stays at the default value, in mobile Safari. So I suppose it's safe to assume that this quite simple counts as a bug in the webkit routines of iOS, and there is no direct solution unless Apple fixes the problem.

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

A workaround would be to create a DIV that looks like whatever you want it to, and add an onclick handler that submits your form. No need to ever use a real submit button.

这篇关于&lt; input type =&quot; submit&quot;&gt;在Safari手机上填充错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！